pax_global_header00006660000000000000000000000064130220744100014503gustar00rootroot0000000000000052 comment=15f3125da9b68d0c73a10f53baa8a5f21d92aab6 breakpoint-2.7.1/000077500000000000000000000000001302207441000136505ustar00rootroot00000000000000breakpoint-2.7.1/.bump.js000066400000000000000000000025221302207441000152300ustar00rootroot00000000000000'use strict'; var path = require('path'), fs = require('fs'), semver = require('semver'), exec = require('child_process').execSync, args = require('yargs').argv; var pkg = require('./package.json'), ruby = fs.readFileSync('./lib/breakpoint.rb').toString(); var rubyString, date = new Date().toISOString(); var version = pkg.version; if (exec('git status --porcelain').toString() !== '') { console.error('Working dirty. Please commit before trying again'); process.exit(1); } version = { major: semver.major(version), minor: semver.minor(version), patch: semver.patch(version) }; if (args.major) { version = `${version.major + 1}.0.0`; } else if (args.minor) { version = `${version.major}.${version.minor + 1}.0`; } else if (args.patch) { version = `${version.major}.${version.minor}.${version.patch + 1}`; } else { version = `${version.major}.${version.minor}.${version.patch}`; } date = date.substring(0, date.indexOf('T')); rubyString = `module Breakpoint VERSION = "${version}" DATE = "${date}" end`; ruby = ruby.substring(0, ruby.indexOf('module Breakpoint')) + rubyString; pkg.version = version; fs.writeFileSync('./lib/breakpoint.rb', ruby + '\n'); fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2) + '\n'); exec(`git commit -am "Release v${version}"`); exec(`git tag v${version}`); breakpoint-2.7.1/.gembuild.js000066400000000000000000000006061302207441000160560ustar00rootroot00000000000000'use strict'; var exec = require('child_process').execSync, version = require('./package.json').version; var commands = [ 'gem build breakpoint.gemspec', `gem push breakpoint-${version}.gem`, `rm breakpoint-${version}.gem` ]; commands.forEach(command => { try { exec(command); } catch (e) { console.error(e.message); process.exit(1); } }); process.exit(); breakpoint-2.7.1/.gitignore000066400000000000000000000002561302207441000156430ustar00rootroot00000000000000# Gem Files *.gem tests/**/*.map # Bundler Files .bundle /vendor /node_modules Gemfile.lock # Testing Files test/test # Sass Files .sass-cache /tests/output/ tests/diff breakpoint-2.7.1/.travis.yml000066400000000000000000000002001302207441000157510ustar00rootroot00000000000000language: ruby bundler_args: --without development rvm: - 1.8.7 - 2.0.0 gemfile: - Gemfile branches: only: - 2.x.x breakpoint-2.7.1/CHANGELOG.md000066400000000000000000000103321302207441000154600ustar00rootroot00000000000000# Changelog ## 2.6.0 * **Change** Moved variable settings to new Breakpoint settings. Future versions will deprecate variable settings. Use `@include breakpoint-set()` or `@include bkpt-set()` to change settings, `@include breakpoint-reset()` or `@include bkpt-reset()` to reset settings to their default state. Please update your settings as followins: * `$breakpoint-default-media: value;` should become `@include bkpt-set('default media', value);` * `$breakpoint-default-feature: value;` should become `@include bkpt-set('default feature', value);` * `$breakpoint-default-pair: value;` should become `@include bkpt-set('default pair', value);` * `$breakpoint-force-media-all: value;` should become `@include bkpt-set('force all media type', value);` * `$breakpoint-to-ems: value;` should become `@include bkpt-set('to ems', value);` * `$breakpoint-resolutions: value;` should become `@include bkpt-set('transform resolutions', value);` * `$breakpoint-no-queries: value;` should become `@include bkpt-set('no queries', value);` * `$breakpoint-no query fallbacks: value;` should become `@include bkpt-set('no query fallbacks', value);` * `$breakpoint-base-font-size: value;` should become `@include bkpt-set('base font size', value);` * `$breakpoint-legacy-syntax: value;` should become `@include bkpt-set('legacy syntax', value);` * **Change** Adding breakpoints for `respond-to` should now be done through the mixin `@include add-breakpoint()` instead of the function call `$breakpoints: add-breakpoint()`. Future versions will deprecate function. * **New** Initial support for Libsass 3.1 ## 2.5.0 ## 2.4.0 ## 2.3.0 ## 2.2.0 ### Nov 23, 2013 * fix simple or queries * convert respond-to to use sass maps * convert context to use sass maps ## 2.0.7 ### Sept 17th, 2013 * fix fallback support for 1.x ## 2.0.0 ### The Past * Looks like we forgot release notes for 2.0. oops ## 1.3 ### August 28th, 2012 * better conversion to base-ems * fix floating point error ## 1.2 ### August 16th, 2012 * Added ability to force the 'all' media type to be written by setting `$breakpoint-force-media-all: true;`. Defaults to `false`. * Added ability to generate no query fallback code. See the README for full documentaiton. ## 1.1.1 ### July 30, 2012 * Added (forgot to include the first time) the ability to query the media type using `breakpoint-get-context('media')` ## 1.1 ### July 29, 2012 * Added function `breakpoint-get-context($feature)` to allow users to get the current media query context ## 1.0.2 ### July 28, 2012 * Refixed our 'device-pixel-ratio' conversions because, frankly, the w3c was wrong. * fixed bugs that caused single and triple value single queries to fail. Also bugs with stacking single and triple value queries. ## 1.0.1 ### June 27, 2012 * fixed logic error that would print multiple instences of a media type ## 1.0 ### June 22, 2012 * Refactor of the underlying logic to make everything work better and make the world a happy place. * Added default options for Default Feature, Default Media, and Default Feature Pair. * Changed default media from "Screen" to "All". * Added ability to have all px/pt/percentage media queries transformed into em based media queries. ## 0.3 ### June 18, 2012 * Rewrote 'device-pixel-ratio' conversions to change from prefixed nightmarish hell to Resolution standard based on the [W3C Unprefixing -webkit-device-pixel-ratio article](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) * Large README update covering feature set, installation, assumptions, and more. ## 0.2 ### May 24, 2012 * Converted from Sass to SCSS * Converted README examples from Sass to SCSS * Added ability to do min/max easily with any valid feature * Added prefixing for "device-pixel-ratio" feature for the three implementations (-webkit, -moz, -o) as well as a standard version for future friendliness * -moz's min/max is different than -webkit or -o, so prefixed differently * Opera is strange and needs its DPR in a ratio instead of a floating point number, so requires the fraction rubygem and has a numerator/denominator function to accommodate. * Added ability to have single feature/value input be either have feature first or second ## 0.1 ### May 22, 2012 * extract breakpoint from survival kit to this gem breakpoint-2.7.1/CONTRIBUTING.md000066400000000000000000000047411302207441000161070ustar00rootroot00000000000000## Contributing to Breakpoint We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the following guidelines: * **DO NOT ISSUE A PULL REQUEST WITHOUT RELATED ISSUE!!** All pull requests must reference an issue in the issue queue and will only be looked at after discussion about that issue has taken place. Any pull request created that does not reference an issue will be closed. * All pull requests will be tested against our standard test suite through Travis CI. If any of the tests fail, we will ask you to fix your code so that the tests no longer fail. Any new features that are added must have accompanying passing tests before being considered. During a pull request, we may ask for additional tests to be written in order to ensure that what is being changed does not have negative effects elsewhere. * We are actively trying to stay away from Ruby functionality and am attempting to build this entirely with native Sass functionality. If you would like to add a feature that includes Ruby code, there needs to be a very very compelling case as to why. * Each individual feature you would like to add, or bug you would like to squash, should be an individual pull request. Each pull request should be from an individual feature branch to either the latest stable or development branch. **The current *stable* branch is 2.x.x. The current *development* branch is 2.x.x**. Contributions that are not in the form of a pull request will not be considered. If your pull request does not apply cleanly we will ask you to fix that before we will look into pulling it in. We may ask you to update or make changes to the code you've submitted, please don't take this the wrong way. If a pull request smells (such as if a large amount of code is all within a single commit, or the coding standards aren't in line with core Breakpoint) we may ask you to rewrite your commit. ### Testing We have automated tests to ensure our build is working. To test, you must install [Bundler](http://bundler.io/), which will allow you to install all needed gem versions. Once you have Bundler up and running and have your dependencies installed, run ```bundle exec rake``` to run the tests. All tests are stored within the 'test' folder as .scss files. The test suite ensures that each test compiles, and does not change the expected behavior. If a test needs to be updated or changed, update the correct .scss file, and then run ```bundle exec rake compile``` to update all corrosponding css files. breakpoint-2.7.1/Gemfile000066400000000000000000000003261302207441000151440ustar00rootroot00000000000000# Pull gems from RubyGems source 'https://rubygems.org' gem 'sass', '~>3.4' gem 'compass', '~>1.0' gem 'sassy-maps', '<1.0.0' group :test do gem 'rake' gem "diffy", "~> 3.0.1" gem "colorize", "~> 0.6.0" endbreakpoint-2.7.1/README.md000066400000000000000000000071671302207441000151420ustar00rootroot00000000000000# Breakpoint [![Gem Version](https://badge.fury.io/rb/breakpoint.png)](http://badge.fury.io/rb/breakpoint) [![Build Status](https://travis-ci.org/Team-Sass/breakpoint.png)](https://travis-ci.org/Team-Sass/breakpoint) **Really Simple Media Queries with Sass** Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the `breakpoint` mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best. Breakpoint also allows you to get the [context of your media queries](https://github.com/Team-Sass/breakpoint/wiki/Breakpoint-Context) from your code, allowing you to write dynamic mixins based on their media query context. If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, or want to dynamically generate media queries, the [Respond-To](https://github.com/Team-Sass/breakpoint/wiki/Respond-To) syntax is now included in Breakpoint core! **It is important to note** that due to limitations within the Sass language itself, which themselves stem from some potentially unexpected cascading from doing so, Breakpoint is unable to concat like media queries into a single media query. This means they will be spread out throughout your CSS. This is unfortunate, yes, but currently unavoidable. That being said, once [Sass Issue #241: Seperate Media/Browser Specific Markup to Separate Style Sheet](https://github.com/nex3/sass/issues/241) hits, be sure we're going to take full advantage of it. ## Full documentation is available on the [Breakpoint Wiki](https://github.com/Team-Sass/breakpoint/wiki) ## Getting Help with Breakpoint * For help with Breakpoint, please ask a question on [Stack Overflow](http://stackoverflow.com/questions/ask) tagged with "breakpoint-sass". * To file an issue with Breakpoint, be it a feature request or a bug report, please use our [Issue Queue](https://github.com/Team-Sass/breakpoint/issues). * **Each Separate Bug Report or Feature Request Must Have Its Own Issue** * Search in both active issues and closed issues before filing your own. If one already exists, please respond there. * If you are in IRC, the maintainers and many fellow users tend to hang out in the #sass and #compass rooms on irc.freenode.net. Asking in there may get you a quick answer to your question, but we still encourage you to file your inquiry in the appropriate place above to ## Contributing to Breakpoint We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the [Contributing Guidelines](https://github.com/Team-Sass/breakpoint/blob/2.x.x/CONTRIBUTING.md) ## Awesome Things Built With Breakpoint Breakpoint is designed to be a Media Query engine to power everything from design tweaks to media query contexts to full media query fallbacks. But we also know that our users will build awesome thing with these tools. Build a Breakpoint powered mixin for new media query semantics? We want to hear about it! Build something cool with Context? Let us know! If you would like to add your Awesome Thing to the list, please issue a Pull Request to add it! * [Singularity](https://github.com/Team-Sass/Singularity) - Semantic Grid System * [Breakpoint Slicer](https://github.com/lolmaus/breakpoint-slicer) - Quick and efficient syntax for Min/Max Width media queries ## License Licensed under MIT/GPL. GPL2 license: http://www.gnu.org/licenses/gpl-2.0.html MIT license: http://www.opensource.org/licenses/mit-license.php breakpoint-2.7.1/Rakefile000066400000000000000000000011311302207441000153110ustar00rootroot00000000000000task :default => [:test] task :test do require 'fileutils' Dir.chdir('tests') do output_dir = 'output' FileUtils.mkdir_p output_dir ruby '.unit_tests.rb' FileUtils.rm_rf output_dir end end desc 'Compile baseline CSS' task :compile do require 'compass' require 'compass/exec' Dir.chdir('tests') do Compass.add_configuration 'config.rb' Compass.configuration.project_path = Dir.pwd # Compile into baseline directory instead of test output directory Compass.configuration.css_dir = 'controls' Compass.compiler.clean! Compass.compiler.run end end breakpoint-2.7.1/bower.json000066400000000000000000000004271302207441000156640ustar00rootroot00000000000000{ "name": "breakpoint-sass", "main": "stylesheets/_breakpoint.scss", "ignore": [ "**/.*", "node_modules", "components", "test", "tests", "Rakefile", "*.gemspec", "lib", "Gemfile" ], "dependencies": { "sassy-maps": "<1.0.0" } } breakpoint-2.7.1/breakpoint.gemspec000066400000000000000000000016151302207441000173560ustar00rootroot00000000000000require './lib/breakpoint' Gem::Specification.new do |s| # Release Specific Information s.version = Breakpoint::VERSION s.date = Breakpoint::DATE # Gem Details s.name = "breakpoint" s.rubyforge_project = "breakpoint" s.description = %q{Really simple media queries in Sass} s.summary = %q{An easy to use system for writing and managing media queries.} s.authors = ["Mason Wendell", "Sam Richard"] s.email = ["mason@thecodingdesigner.com", "sam@snug.ug"] s.homepage = "https://github.com/Team-Sass/breakpoint" s.licenses = ["MIT", "GPL-2.0"] # Gem Files s.files = ["README.md"] s.files += ["CHANGELOG.md"] s.files += Dir.glob("lib/**/*.*") s.files += Dir.glob("stylesheets/**/*.*") # Gem Bookkeeping s.required_rubygems_version = ">= 1.3.6" s.rubygems_version = %q{1.3.6} s.add_dependency("sass", ["~>3.3"]) s.add_dependency("sassy-maps", ["<1.0.0"]) end breakpoint-2.7.1/eyeglass-exports.js000066400000000000000000000002121302207441000175170ustar00rootroot00000000000000var path = require('path'); module.exports = function(eyeglass, sass) { return { sassDir: path.join(__dirname, 'stylesheets') } }breakpoint-2.7.1/lib/000077500000000000000000000000001302207441000144165ustar00rootroot00000000000000breakpoint-2.7.1/lib/breakpoint.rb000066400000000000000000000007051302207441000171030ustar00rootroot00000000000000base_directory = File.expand_path(File.join(File.dirname(__FILE__), '..')) breakpoint_stylesheets_path = File.join(base_directory, 'stylesheets') if (defined? Compass) require 'sassy-maps' Compass::Frameworks.register( "breakpoint", :path => base_directory ) else ENV["SASS_PATH"] = [ENV["SASS_PATH"], breakpoint_stylesheets_path].compact.join(File::PATH_SEPARATOR) end module Breakpoint VERSION = "2.7.1" DATE = "2016-12-07" end breakpoint-2.7.1/package.json000066400000000000000000000022031302207441000161330ustar00rootroot00000000000000{ "name": "breakpoint-sass", "version": "2.7.1", "description": "Really Simple Media Queries with Sass", "main": "stylesheets/_breakpoint.scss", "eyeglass": { "needs": "^1.0.0", "exports": "eyeglass-exports.js", "name": "breakpoint" }, "directories": { "test": "tests" }, "keywords": [ "sass", "responsive", "rwd", "eyeglass-module", "breakpoint" ], "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "bump:major": "node .bump.js --major", "bump:minor": "node .bump.js --minor", "bump:patch": "node .bump.js --patch", "publish": "node .gembuild.js && git push && git push origin --tags" }, "repository": { "type": "git", "url": "https://github.com/Team-Sass/breakpoint.git" }, "author": "", "license": "MIT", "bugs": { "url": "https://github.com/Team-Sass/breakpoint/issues" }, "homepage": "https://github.com/Team-Sass/breakpoint", "devDependencies": { "diff": "^1.2.1", "fs-extra": "^0.14.0", "glob": "^4.3.2", "node-sass": "^3.0.0", "nodegit": "^0.11.2", "semver": "^5.1.0", "yargs": "^4.1.0" } } breakpoint-2.7.1/sache.json000066400000000000000000000010011302207441000156160ustar00rootroot00000000000000{ "name": "breakpoint", "description": "Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.", "tags": ["media-queries", "rwd", "responsive-web-design", "dry"] } breakpoint-2.7.1/stylesheets/000077500000000000000000000000001302207441000162245ustar00rootroot00000000000000breakpoint-2.7.1/stylesheets/_breakpoint.scss000066400000000000000000000051071302207441000214210ustar00rootroot00000000000000////////////////////////////// // Default Variables ////////////////////////////// $Breakpoint-Settings: ( 'default media': all, 'default feature': min-width, 'default pair': width, 'force all media type': false, 'to ems': false, 'transform resolutions': true, 'no queries': false, 'no query fallbacks': false, 'base font size': 16px, 'legacy syntax': false ); $breakpoint: () !default; ////////////////////////////// // Imports ////////////////////////////// @import "breakpoint/settings"; @import 'breakpoint/context'; @import 'breakpoint/helpers'; @import 'breakpoint/parsers'; @import 'breakpoint/no-query'; @import 'breakpoint/respond-to'; @import "breakpoint/legacy-settings"; ////////////////////////////// // Breakpoint Mixin ////////////////////////////// @mixin breakpoint($query, $no-query: false) { @include legacy-settings-warning; // Reset contexts @include private-breakpoint-reset-contexts(); $breakpoint: breakpoint($query, false); $query-string: map-get($breakpoint, 'query'); $query-fallback: map-get($breakpoint, 'fallback'); $private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global; $private-breakpoint-query-count: map-get($breakpoint, 'query count') !global; // Allow for an as-needed override or usage of no query fallback. @if $no-query != false { $query-fallback: $no-query; } @if $query-fallback != false { $context-setter: private-breakpoint-set-context('no-query', $query-fallback); } // Print Out Query String @if not breakpoint-get('no queries') { @media #{$query-string} { @content; } } @if breakpoint-get('no query fallbacks') != false or breakpoint-get('no queries') == true { $type: type-of(breakpoint-get('no query fallbacks')); $print: false; @if ($type == 'bool') { $print: true; } @else if ($type == 'string') { @if $query-fallback == breakpoint-get('no query fallbacks') { $print: true; } } @else if ($type == 'list') { @each $wrapper in breakpoint-get('no query fallbacks') { @if $query-fallback == $wrapper { $print: true; } } } // Write Fallback @if ($query-fallback != false) and ($print == true) { $type-fallback: type-of($query-fallback); @if ($type-fallback != 'bool') { #{$query-fallback} & { @content; } } @else { @content; } } } @include private-breakpoint-reset-contexts(); } @mixin mq($query, $no-query: false) { @include breakpoint($query, $no-query) { @content; } } breakpoint-2.7.1/stylesheets/breakpoint/000077500000000000000000000000001302207441000203625ustar00rootroot00000000000000breakpoint-2.7.1/stylesheets/breakpoint/_context.scss000066400000000000000000000061071302207441000231060ustar00rootroot00000000000000////////////////////////////// // Private Breakpoint Variables ////////////////////////////// $private-breakpoint-context-holder: (); $private-breakpoint-query-count: 0 !default; ////////////////////////////// // Breakpoint Has Context // Returns whether or not you are inside a Breakpoint query ////////////////////////////// @function breakpoint-has-context() { @if length($private-breakpoint-query-count) { @return true; } @else { @return false; } } ////////////////////////////// // Breakpoint Get Context // $feature: Input feature to get it's current MQ context. Returns false if no context ////////////////////////////// @function breakpoint-get-context($feature) { @if map-has-key($private-breakpoint-context-holder, $feature) { $get: map-get($private-breakpoint-context-holder, $feature); // Special handling of no-query from get side so /false/ prepends aren't returned @if $feature == 'no-query' { @if type-of($get) == 'list' and length($get) > 1 and nth($get, 1) == false { $get: nth($get, length($get)); } } @return $get; } @else { @if breakpoint-has-context() and $feature == 'media' { @return breakpoint-get('default media'); } @else { @return false; } } } ////////////////////////////// // Private function to set context ////////////////////////////// @function private-breakpoint-set-context($feature, $value) { @if $value == 'monochrome' { $feature: 'monochrome'; } $current: map-get($private-breakpoint-context-holder, $feature); @if $current and length($current) == $private-breakpoint-query-count { @warn "You have already queried against `#{$feature}`. Unexpected things may happen if you query against the same feature more than once in the same `and` query. Breakpoint is overwriting the current context with `#{$value}`"; } @if not map-has-key($private-breakpoint-context-holder, $feature) { $v-holder: (); @for $i from 1 to $private-breakpoint-query-count { @if $feature == 'media' { $v-holder: append($v-holder, breakpoint-get('default media')); } @else { $v-holder: append($v-holder, false); } } $v-holder: append($v-holder, $value); $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global; } @else { $v-holder: map-get($private-breakpoint-context-holder, $feature); $length: length($v-holder); @for $i from $length to $private-breakpoint-query-count - 1 { @if $feature == 'media' { $v-holder: append($v-holder, breakpoint-get('default media')); } @else { $v-holder: append($v-holder, false); } } $v-holder: append($v-holder, $value); $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global; } @return true; } ////////////////////////////// // Private function to reset context ////////////////////////////// @mixin private-breakpoint-reset-contexts { $private-breakpoint-context-holder: () !global; $private-breakpoint-query-count: 0 !global; }breakpoint-2.7.1/stylesheets/breakpoint/_helpers.scss000066400000000000000000000103271302207441000230630ustar00rootroot00000000000000////////////////////////////// // Converts the input value to Base EMs ////////////////////////////// @function breakpoint-to-base-em($value) { $value-unit: unit($value); // Will convert relative EMs into root EMs. @if breakpoint-get('base font size') and type-of(breakpoint-get('base font size')) == 'number' and $value-unit == 'em' { $base-unit: unit(breakpoint-get('base font size')); @if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' { @return base-conversion($value) / base-conversion(breakpoint-get('base font size')) * 1em; } @else { @warn '#{breakpoint-get(\'base font size\')} is not set in valid units for font size!'; @return false; } } @else { @return base-conversion($value); } } @function base-conversion($value) { $unit: unit($value); @if $unit == 'px' { @return $value / 16px * 1em; } @else if $unit == '%' { @return $value / 100% * 1em; } @else if $unit == 'em' { @return $value; } @else if $unit == 'pt' { @return $value / 12pt * 1em; } @else { @return $value; // @warn 'Everything is terrible! What have you done?!'; } } ////////////////////////////// // Returns whether the feature can have a min/max pair ////////////////////////////// $breakpoint-min-max-features: 'color', 'color-index', 'aspect-ratio', 'device-aspect-ratio', 'device-height', 'device-width', 'height', 'monochrome', 'resolution', 'width'; @function breakpoint-min-max($feature) { @each $item in $breakpoint-min-max-features { @if $feature == $item { @return true; } } @return false; } ////////////////////////////// // Returns whether the feature can have a string value ////////////////////////////// $breakpoint-string-features: 'orientation', 'scan', 'color', 'aspect-ratio', 'device-aspect-ratio', 'pointer', 'luminosity'; @function breakpoint-string-value($feature) { @each $item in $breakpoint-string-features { @if breakpoint-min-max($item) { @if $feature == 'min-#{$item}' or $feature == 'max-#{$item}' { @return true; } } @else if $feature == $item { @return true; } } @return false; } ////////////////////////////// // Returns whether the feature is a media type ////////////////////////////// $breakpoint-media-types: 'all', 'braille', 'embossed', 'handheld', 'print', 'projection', 'screen', 'speech', 'tty', 'tv'; @function breakpoint-is-media($feature) { @each $media in $breakpoint-media-types { @if ($feature == $media) or ($feature == 'not #{$media}') or ($feature == 'only #{$media}') { @return true; } } @return false; } ////////////////////////////// // Returns whether the feature can stand alone ////////////////////////////// $breakpoint-single-string-features: 'color', 'color-index', 'grid', 'monochrome'; @function breakpoint-single-string($feature) { @each $item in $breakpoint-single-string-features { @if $feature == $item { @return true; } } @return false; } ////////////////////////////// // Returns whether the feature ////////////////////////////// @function breakpoint-is-resolution($feature) { $resolutions: 'device-pixel-ratio', 'dpr'; @if breakpoint-get('transform resolutions') { $resolutions: append($resolutions, 'resolution'); } @each $reso in $resolutions { @if index($feature, $reso) or index($feature, 'min-#{$reso}') or index($feature, 'max-#{$reso}') { @return true; } } @return false; } breakpoint-2.7.1/stylesheets/breakpoint/_legacy-settings.scss000066400000000000000000000053231302207441000245230ustar00rootroot00000000000000@mixin legacy-settings-warning { $legacyVars: ( 'default-media': 'default media', 'default-feature': 'default feature', 'force-media-all': 'force all media type', 'to-ems': 'to ems', 'resolutions': 'transform resolutions', 'no-queries': 'no queries', 'no-query-fallbacks': 'no query fallbacks', 'base-font-size': 'base font size', 'legacy-syntax': 'legacy syntax' ); @each $legacy, $new in $legacyVars { @if global-variable-exists('breakpoint-' + $legacy) { @warn "In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of `$breakpoint-#{$legacy}: {{setting}}` to `@include breakpoint-set('#{$new}', {{setting}})`. Variable settings, as well as this warning will be deprecated in a future release." } }; ////////////////////////////// // Hand correct each setting ////////////////////////////// @if global-variable-exists('breakpoint-default-media') and $breakpoint-default-media != breakpoint-get('default media') { @include breakpoint-set('default media', $breakpoint-default-media); } @if global-variable-exists('breakpoint-default-feature') and $breakpoint-default-feature != breakpoint-get('default feature') { @include breakpoint-set('default feature', $breakpoint-default-feature); } @if global-variable-exists('breakpoint-force-media-all') and $breakpoint-force-media-all != breakpoint-get('force all media type') { @include breakpoint-set('force all media type', $breakpoint-force-media-all); } @if global-variable-exists('breakpoint-to-ems') and $breakpoint-to-ems != breakpoint-get('to ems') { @include breakpoint-set('to ems', $breakpoint-to-ems); } @if global-variable-exists('breakpoint-resolutions') and $breakpoint-resolutions != breakpoint-get('transform resolutions') { @include breakpoint-set('transform resolutions', $breakpoint-resolutions); } @if global-variable-exists('breakpoint-no-queries') and $breakpoint-no-queries != breakpoint-get('no queries') { @include breakpoint-set('no queries', $breakpoint-no-queries); } @if global-variable-exists('breakpoint-no-query-fallbacks') and $breakpoint-no-query-fallbacks != breakpoint-get('no query fallbacks') { @include breakpoint-set('no query fallbacks', $breakpoint-no-query-fallbacks); } @if global-variable-exists('breakpoint-base-font-size') and $breakpoint-base-font-size != breakpoint-get('base font size') { @include breakpoint-set('base font size', $breakpoint-base-font-size); } @if global-variable-exists('breakpoint-legacy-syntax') and $breakpoint-legacy-syntax != breakpoint-get('legacy syntax') { @include breakpoint-set('legacy syntax', $breakpoint-legacy-syntax); } }breakpoint-2.7.1/stylesheets/breakpoint/_no-query.scss000066400000000000000000000005241302207441000231760ustar00rootroot00000000000000@function breakpoint-no-query($query) { @if type-of($query) == 'list' { $keyword: nth($query, 1); @if type-of($keyword) == 'string' and ($keyword == 'no-query' or $keyword == 'no query' or $keyword == 'fallback') { @return nth($query, 2); } @else { @return false; } } @else { @return false; } } breakpoint-2.7.1/stylesheets/breakpoint/_parsers.scss000066400000000000000000000152131302207441000230770ustar00rootroot00000000000000////////////////////////////// // Import Parser Pieces ////////////////////////////// @import "parsers/query"; @import "parsers/single"; @import "parsers/double"; @import "parsers/triple"; @import "parsers/resolution"; $Memo-Exists: function-exists(memo-get) and function-exists(memo-set); ////////////////////////////// // Breakpoint Function ////////////////////////////// @function breakpoint($query, $contexts...) { $run: true; $return: (); // Grab the Memo Output if Memoization can be a thing @if $Memo-Exists { $return: memo-get(breakpoint, breakpoint $query $contexts); @if $return != null { $run: false; } } @if not $Memo-Exists or $run { // Internal Variables $query-string: ''; $query-fallback: false; $return: (); // Reserve Global Private Breakpoint Context $holder-context: $private-breakpoint-context-holder; $holder-query-count: $private-breakpoint-query-count; // Reset Global Private Breakpoint Context $private-breakpoint-context-holder: () !global; $private-breakpoint-query-count: 0 !global; // Test to see if it's a comma-separated list $or-list: if(list-separator($query) == 'comma', true, false); @if ($or-list == false and breakpoint-get('legacy syntax') == false) { $query-string: breakpoint-parse($query); } @else { $length: length($query); $last: nth($query, $length); $query-fallback: breakpoint-no-query($last); @if ($query-fallback != false) { $length: $length - 1; } @if (breakpoint-get('legacy syntax') == true) { $mq: (); @for $i from 1 through $length { $mq: append($mq, nth($query, $i), comma); } $query-string: breakpoint-parse($mq); } @else { $query-string: ''; @for $i from 1 through $length { $query-string: $query-string + if($i == 1, '', ', ') + breakpoint-parse(nth($query, $i)); } } } $return: ('query': $query-string, 'fallback': $query-fallback, 'context holder': $private-breakpoint-context-holder, 'query count': $private-breakpoint-query-count ); @if length($contexts) > 0 and nth($contexts, 1) != false { @if $query-fallback != false { $context-setter: private-breakpoint-set-context('no-query', $query-fallback); } $context-map: (); @each $context in $contexts { $context-map: map-merge($context-map, ($context: breakpoint-get-context($context))); } $return: map-merge($return, (context: $context-map)); } // Reset Global Private Breakpoint Context $private-breakpoint-context-holder: () !global; $private-breakpoint-query-count: 0 !global; @if $Memo-Exists { $holder: memo-set(breakpoint, breakpoint $query $contexts, $return); } } @return $return; } ////////////////////////////// // General Breakpoint Parser ////////////////////////////// @function breakpoint-parse($query) { // Increase number of 'and' queries $private-breakpoint-query-count: $private-breakpoint-query-count + 1 !global; // Set up Media Type $query-print: ''; $force-all: ((breakpoint-get('force all media type') == true) and (breakpoint-get('default media') == 'all')); $empty-media: true; @if ($force-all == true) or (breakpoint-get('default media') != 'all') { // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all) $query-print: breakpoint-get('default media'); $empty-media: false; } $query-resolution: false; $query-holder: breakpoint-parse-query($query); // Loop over each parsed out query and write it to $query-print $first: true; @each $feature in $query-holder { $length: length($feature); // Parse a single feature @if ($length == 1) { // Feature is currently a list, grab the actual value $feature: nth($feature, 1); // Media Type must by convention be the first item, so it's safe to flat override $query-print, which right now should only be the default media type @if (breakpoint-is-media($feature)) { @if ($force-all == true) or ($feature != 'all') { // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all) $query-print: $feature; $empty-media: false; // Set Context $context-setter: private-breakpoint-set-context(media, $query-print); } } @else { $parsed: breakpoint-parse-single($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } } // Parse a double feature @else if ($length == 2) { @if (breakpoint-is-resolution($feature) != false) { $query-resolution: $feature; } @else { $parsed: null; // If it's a string/number pair, // we check to see if one is a single-string value, // then we parse it as a normal double $alpha: nth($feature, 1); $beta: nth($feature, 2); @if breakpoint-single-string($alpha) or breakpoint-single-string($beta) { $parsed: breakpoint-parse-single($alpha, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; $parsed: breakpoint-parse-single($beta, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; } @else { $parsed: breakpoint-parse-double($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } } } // Parse a triple feature @else if ($length == 3) { $parsed: breakpoint-parse-triple($feature, $empty-media, $first); $query-print: '#{$query-print} #{$parsed}'; $first: false; } } @if ($query-resolution != false) { $query-print: breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first); } // Loop through each feature that's been detected so far and append 'false' to the the value list to increment their counters @each $f, $v in $private-breakpoint-context-holder { $v-holder: $v; $length: length($v-holder); @if length($v-holder) < $private-breakpoint-query-count { @for $i from $length to $private-breakpoint-query-count { @if $f == 'media' { $v-holder: append($v-holder, breakpoint-get('default media')); } @else { $v-holder: append($v-holder, false); } } } $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($f: $v-holder)) !global; } @return $query-print; } breakpoint-2.7.1/stylesheets/breakpoint/_respond-to.scss000066400000000000000000000055041302207441000235140ustar00rootroot00000000000000//////////////////////// // Default the Breakpoints variable //////////////////////// $breakpoints: () !default; $BREAKPOINTS: () !default; //////////////////////// // Respond-to API Mixin //////////////////////// @mixin respond-to($context, $no-query: false) { @if length($breakpoints) > 0 and length($BREAKPOINTS) == 0 { @warn "In order to avoid variable namespace collisions, we have updated the way to add breakpoints for respond-to. Please change all instances of `$breakpoints: add-breakpoint()` to `@include add-breakpoint()`. The `add-breakpoint()` function will be deprecated in a future release."; $BREAKPOINTS: $breakpoints !global; $breakpoints: () !global; } @if type-of($BREAKPOINTS) != 'map' { // Just in case someone writes gibberish to the $breakpoints variable. @warn "Your breakpoints aren't a map! `respond-to` expects a map. Please check the value of $BREAKPOINTS variable."; @content; } @else if map-has-key($BREAKPOINTS, $context) { @include breakpoint(map-get($BREAKPOINTS, $context), $no-query) { @content; } } @else if not map-has-key($BREAKPOINTS, $context) { @warn "`#{$context}` isn't a defined breakpoint! Please add it using `$breakpoints: add-breakpoint(`#{$context}`, $value);`"; @content; } @else { @warn "You haven't created any breakpoints yet! Make some already! `@include add-breakpoint($name, $bkpt)`"; @content; } } ////////////////////////////// // Add Breakpoint to Breakpoints // TODO: Remove function in next release ////////////////////////////// @function add-breakpoint($name, $bkpt, $overwrite: false) { $output: ($name: $bkpt); @if length($breakpoints) == 0 { @return $output; } @else { @if map-has-key($breakpoints, $name) and $overwrite != true { @warn "You already have a breakpoint named `#{$name}`, please choose another breakpoint name, or pass in `$overwrite: true` to overwrite the previous breakpoint."; @return $breakpoints; } @else if not map-has-key($breakpoints, $name) or $overwrite == true { @return map-merge($breakpoints, $output); } } } @mixin add-breakpoint($name, $bkpt, $overwrite: false) { $output: ($name: $bkpt); @if length($BREAKPOINTS) == 0 { $BREAKPOINTS: $output !global; } @else { @if map-has-key($BREAKPOINTS, $name) and $overwrite != true { @warn "You already have a breakpoint named `#{$name}`, please choose another breakpoint name, or pass in `$overwrite: true` to overwrite the previous breakpoint."; $BREAKPOINTS: $BREAKPOINTS !global; } @else if not map-has-key($BREAKPOINTS, $name) or $overwrite == true { $BREAKPOINTS: map-merge($BREAKPOINTS, $output) !global; } } } @function get-breakpoint($name: false) { @if $name == false { @return $BREAKPOINTS; } @else { @return map-get($BREAKPOINTS, $name); } } breakpoint-2.7.1/stylesheets/breakpoint/_settings.scss000066400000000000000000000035141302207441000232610ustar00rootroot00000000000000////////////////////////////// // Has Setting ////////////////////////////// @function breakpoint-has($setting) { @if map-has-key($breakpoint, $setting) { @return true; } @else { @return false; } } ////////////////////////////// // Get Settings ////////////////////////////// @function breakpoint-get($setting) { @if breakpoint-has($setting) { @return map-get($breakpoint, $setting); } @else { @return map-get($Breakpoint-Settings, $setting); } } ////////////////////////////// // Set Settings ////////////////////////////// @function breakpoint-set($setting, $value) { @if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null { @warn "Words in Breakpoint settings should be separated by spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed."; } $breakpoint: map-merge($breakpoint, ($setting: $value)) !global; @return true; } @mixin breakpoint-change($setting, $value) { $breakpoint-change: breakpoint-set($setting, $value); } @mixin breakpoint-set($setting, $value) { @include breakpoint-change($setting, $value); } @mixin bkpt-change($setting, $value) { @include breakpoint-change($setting, $value); } @mixin bkpt-set($setting, $value) { @include breakpoint-change($setting, $value); } ////////////////////////////// // Remove Setting ////////////////////////////// @function breakpoint-reset($settings...) { @if length($settings) == 1 { $settings: nth($settings, 1); } @each $setting in $settings { $breakpoint: map-remove($breakpoint, $setting) !global; } @return true; } @mixin breakpoint-reset($settings...) { $breakpoint-reset: breakpoint-reset($settings); } @mixin bkpt-reset($settings...) { $breakpoint-reset: breakpoint-reset($settings); }breakpoint-2.7.1/stylesheets/breakpoint/parsers/000077500000000000000000000000001302207441000220415ustar00rootroot00000000000000breakpoint-2.7.1/stylesheets/breakpoint/parsers/_double.scss000066400000000000000000000020711302207441000243470ustar00rootroot00000000000000////////////////////////////// // Import Pieces ////////////////////////////// @import "double/default-pair"; @import "double/double-string"; @import "double/default"; @function breakpoint-parse-double($feature, $empty-media, $first) { $parsed: ''; $leader: ''; // If we're forcing @if not ($empty-media) or not ($first) { $leader: 'and '; } $first: nth($feature, 1); $second: nth($feature, 2); // If we've got two numbers, we know we need to use the default pair because there are no media queries that has a media feature that is a number @if type-of($first) == 'number' and type-of($second) == 'number' { $parsed: breakpoint-parse-default-pair($first, $second); } // If they are both strings, we send it through the string parser @else if type-of($first) == 'string' and type-of($second) == 'string' { $parsed: breakpoint-parse-double-string($first, $second); } // If it's a string/number pair, we parse it as a normal double @else { $parsed: breakpoint-parse-double-default($first, $second); } @return $leader + $parsed; } breakpoint-2.7.1/stylesheets/breakpoint/parsers/_query.scss000066400000000000000000000075331302207441000242520ustar00rootroot00000000000000@function breakpoint-parse-query($query) { // Parse features out of an individual query $feature-holder: (); $query-holder: (); $length: length($query); @if $length == 2 { // If we've got a string/number, number/string, check to see if it's a valid string/number pair or two singles @if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'number') or (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'string') { $number: ''; $value: ''; @if type-of(nth($query, 1)) == 'string' { $number: nth($query, 2); $value: nth($query, 1); } @else { $number: nth($query, 1); $value: nth($query, 2); } // If the string value can be a single value, check to see if the number passed in is a valid input for said single value. Fortunately, all current single-value options only accept unitless numbers, so this check is easy. @if breakpoint-single-string($value) { @if unitless($number) { $feature-holder: append($value, $number, space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } } // If the string is a media type, split the query @if breakpoint-is-media($value) { $query-holder: append($query-holder, nth($query, 1)); $query-holder: append($query-holder, nth($query, 2)); @return $query-holder; } // If it's not a single feature, we're just going to assume it's a proper string/value pair, and roll with it. @else { $feature-holder: append($value, $number, space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } } // If they're both numbers, we assume it's a double and roll with that @else if (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'number') { $feature-holder: append(nth($query, 1), nth($query, 2), space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } // If they're both strings and neither are singles, we roll with that. @else if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'string') { @if not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) { $feature-holder: append(nth($query, 1), nth($query, 2), space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } } } @else if $length == 3 { // If we've got three items and none is a list, we check to see @if type-of(nth($query, 1)) != 'list' and type-of(nth($query, 2)) != 'list' and type-of(nth($query, 3)) != 'list' { // If none of the items are single string values and none of the values are media values, we're good. @if (not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) and not breakpoint-single-string(nth($query, 3))) and ((not breakpoint-is-media(nth($query, 1)) and not breakpoint-is-media(nth($query, 2)) and not breakpoint-is-media(nth($query, 3)))) { $feature-holder: append(nth($query, 1), nth($query, 2), space); $feature-holder: append($feature-holder, nth($query, 3), space); $query-holder: append($query-holder, $feature-holder, comma); @return $query-holder; } // let's check to see if the first item is a media type @else if breakpoint-is-media(nth($query, 1)) { $query-holder: append($query-holder, nth($query, 1)); $feature-holder: append(nth($query, 2), nth($query, 3), space); $query-holder: append($query-holder, $feature-holder); @return $query-holder; } } } // If it's a single item, or if it's not a special case double or triple, we can simply return the query. @return $query; } breakpoint-2.7.1/stylesheets/breakpoint/parsers/_resolution.scss000066400000000000000000000014251302207441000253020ustar00rootroot00000000000000@import "resolution/resolution"; @function breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first) { $leader: ''; // If we're forcing @if not ($empty-media) or not ($first) { $leader: 'and '; } @if breakpoint-get('transform resolutions') and $query-resolution { $resolutions: breakpoint-make-resolutions($query-resolution); $length: length($resolutions); $query-holder: ''; @for $i from 1 through $length { $query: '#{$query-print} #{$leader}#{nth($resolutions, $i)}'; @if $i == 1 { $query-holder: $query; } @else { $query-holder: '#{$query-holder}, #{$query}'; } } @return $query-holder; } @else { // Return with attached resolution @return $query-print; } } breakpoint-2.7.1/stylesheets/breakpoint/parsers/_single.scss000066400000000000000000000013031302207441000243530ustar00rootroot00000000000000////////////////////////////// // Import Pieces ////////////////////////////// @import "single/default"; @function breakpoint-parse-single($feature, $empty-media, $first) { $parsed: ''; $leader: ''; // If we're forcing @if not ($empty-media) or not ($first) { $leader: 'and '; } // If it's a single feature that can stand alone, we let it @if (breakpoint-single-string($feature)) { $parsed: $feature; // Set Context $context-setter: private-breakpoint-set-context($feature, $feature); } // If it's not a stand alone feature, we pass it off to the default handler. @else { $parsed: breakpoint-parse-default($feature); } @return $leader + '(' + $parsed + ')'; } breakpoint-2.7.1/stylesheets/breakpoint/parsers/_triple.scss000066400000000000000000000013651302207441000244010ustar00rootroot00000000000000////////////////////////////// // Import Pieces ////////////////////////////// @import "triple/default"; @function breakpoint-parse-triple($feature, $empty-media, $first) { $parsed: ''; $leader: ''; // If we're forcing @if not ($empty-media) or not ($first) { $leader: 'and '; } // separate the string features from the value numbers $string: null; $numbers: null; @each $val in $feature { @if type-of($val) == string { $string: $val; } @else { @if type-of($numbers) == 'null' { $numbers: $val; } @else { $numbers: append($numbers, $val); } } } $parsed: breakpoint-parse-triple-default($string, nth($numbers, 1), nth($numbers, 2)); @return $leader + $parsed; } breakpoint-2.7.1/stylesheets/breakpoint/parsers/double/000077500000000000000000000000001302207441000233135ustar00rootroot00000000000000breakpoint-2.7.1/stylesheets/breakpoint/parsers/double/_default-pair.scss000066400000000000000000000011431302207441000267230ustar00rootroot00000000000000@function breakpoint-parse-default-pair($first, $second) { $default: breakpoint-get('default pair'); $min: ''; $max: ''; // Sort into min and max $min: min($first, $second); $max: max($first, $second); // Set Context $context-setter: private-breakpoint-set-context(min-#{$default}, $min); $context-setter: private-breakpoint-set-context(max-#{$default}, $max); // Make them EMs if need be @if (breakpoint-get('to ems') == true) { $min: breakpoint-to-base-em($min); $max: breakpoint-to-base-em($max); } @return '(min-#{$default}: #{$min}) and (max-#{$default}: #{$max})'; } breakpoint-2.7.1/stylesheets/breakpoint/parsers/double/_default.scss000066400000000000000000000007021302207441000257720ustar00rootroot00000000000000@function breakpoint-parse-double-default($first, $second) { $feature: ''; $value: ''; @if type-of($first) == 'string' { $feature: $first; $value: $second; } @else { $feature: $second; $value: $first; } // Set Context $context-setter: private-breakpoint-set-context($feature, $value); @if (breakpoint-get('to ems') == true) { $value: breakpoint-to-base-em($value); } @return '(#{$feature}: #{$value})' } breakpoint-2.7.1/stylesheets/breakpoint/parsers/double/_double-string.scss000066400000000000000000000010701302207441000271230ustar00rootroot00000000000000@function breakpoint-parse-double-string($first, $second) { $feature: ''; $value: ''; // Test to see which is the feature and which is the value @if (breakpoint-string-value($first) == true) { $feature: $first; $value: $second; } @else if (breakpoint-string-value($second) == true) { $feature: $second; $value: $first; } @else { @warn "Neither #{$first} nor #{$second} is a valid media query name."; } // Set Context $context-setter: private-breakpoint-set-context($feature, $value); @return '(#{$feature}: #{$value})'; }breakpoint-2.7.1/stylesheets/breakpoint/parsers/resolution/000077500000000000000000000000001302207441000242445ustar00rootroot00000000000000breakpoint-2.7.1/stylesheets/breakpoint/parsers/resolution/_resolution.scss000066400000000000000000000031631302207441000275060ustar00rootroot00000000000000@function breakpoint-make-resolutions($resolution) { $length: length($resolution); $output: (); @if $length == 2 { $feature: ''; $value: ''; // Find which is number @if type-of(nth($resolution, 1)) == 'number' { $value: nth($resolution, 1); } @else { $value: nth($resolution, 2); } // Determine min/max/standard @if index($resolution, 'min-resolution') { $feature: 'min-'; } @else if index($resolution, 'max-resolution') { $feature: 'max-'; } $standard: '(#{$feature}resolution: #{$value})'; // If we're not dealing with dppx, @if unit($value) != 'dppx' { $base: 96dpi; @if unit($value) == 'dpcm' { $base: 243.84dpcm; } // Write out feature tests $webkit: ''; $moz: ''; $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / $base})'; $moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / $base})'; // Append to output $output: append($output, $standard, space); $output: append($output, $webkit, space); $output: append($output, $moz, space); } @else { $webkit: ''; $moz: ''; $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / 1dppx})'; $moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / 1dppx})'; $fallback: '(#{$feature}resolution: #{$value / 1dppx * 96dpi})'; // Append to output $output: append($output, $standard, space); $output: append($output, $webkit, space); $output: append($output, $moz, space); $output: append($output, $fallback, space); } } @return $output; } breakpoint-2.7.1/stylesheets/breakpoint/parsers/single/000077500000000000000000000000001302207441000233225ustar00rootroot00000000000000breakpoint-2.7.1/stylesheets/breakpoint/parsers/single/_default.scss000066400000000000000000000006021302207441000260000ustar00rootroot00000000000000@function breakpoint-parse-default($feature) { $default: breakpoint-get('default feature'); // Set Context $context-setter: private-breakpoint-set-context($default, $feature); @if (breakpoint-get('to ems') == true) and (type-of($feature) == 'number') { @return '#{$default}: #{breakpoint-to-base-em($feature)}'; } @else { @return '#{$default}: #{$feature}'; } } breakpoint-2.7.1/stylesheets/breakpoint/parsers/triple/000077500000000000000000000000001302207441000233405ustar00rootroot00000000000000breakpoint-2.7.1/stylesheets/breakpoint/parsers/triple/_default.scss000066400000000000000000000010531302207441000260170ustar00rootroot00000000000000@function breakpoint-parse-triple-default($feature, $first, $second) { // Sort into min and max $min: min($first, $second); $max: max($first, $second); // Set Context $context-setter: private-breakpoint-set-context(min-#{$feature}, $min); $context-setter: private-breakpoint-set-context(max-#{$feature}, $max); // Make them EMs if need be @if (breakpoint-get('to ems') == true) { $min: breakpoint-to-base-em($min); $max: breakpoint-to-base-em($max); } @return '(min-#{$feature}: #{$min}) and (max-#{$feature}: #{$max})'; } breakpoint-2.7.1/tests/000077500000000000000000000000001302207441000150125ustar00rootroot00000000000000breakpoint-2.7.1/tests/.unit_tests.rb000066400000000000000000000040571302207441000176240ustar00rootroot00000000000000require 'compass' require 'compass/exec' require 'test/unit' require 'diffy' require 'colorize' require 'pathname' class TestCompassOutput < Test::Unit::TestCase Compass.add_configuration 'config.rb' Compass.configuration.project_path = Dir.pwd # Remove all current Diff files Dir.glob("#{Dir.pwd}/output/**/*.css.diff").each { |f| File.delete(f) } Compass.compiler.sass_files.each do |sass_file| test_name = File.basename(sass_file, '.*') define_method "test_#{test_name}_compile " do # Compiled CSS file path test_file_pwd = Compass.compiler.corresponding_css_file(sass_file) # Relative path of compiled CSS file from Tests directory relative_pwd = Pathname.new(test_file_pwd).relative_path_from(Pathname.new("#{Dir.pwd}/output")).to_s # Control files path control_file_pwd = "#{Dir.pwd}/controls/" + relative_pwd # The base path of the sub folders, making the folders if needed base_pwd = relative_pwd.sub(File.basename(relative_pwd), '') FileUtils.mkdir_p "#{Dir.pwd}/output/#{base_pwd}" # Compiles Sass file Compass.compiler.compile sass_file, test_file_pwd # Raises exception upon error begin # Assert that our test output matches our control output passed = assert FileUtils.compare_file(test_file_pwd, control_file_pwd), "Compiled output for #{File.basename(sass_file)} does not match control output!".red ensure # If there is a failure, generate a diff of the files and put it with the compiled file if !passed test_file = File.open(test_file_pwd).read; control_file = File.open(control_file_pwd).read; diff_pwd = "#{Dir.pwd}/output/#{relative_pwd}.diff" diff_content = Diffy::Diff.new(control_file, test_file, :include_diff_info => true) File.open(diff_pwd, 'w') { |f| f.write(diff_content.to_s(:text)) } puts "Control->Compiled diff output to ".yellow + " tests/output/#{relative_pwd}.diff ".colorize( :color => :blue, :background => :black) end end end end end breakpoint-2.7.1/tests/config.rb000066400000000000000000000012371302207441000166070ustar00rootroot00000000000000# Require any additional compass plugins here.] require 'sassy-maps' # File system locations sass_dir = 'tests' css_dir = 'output' # Import latest breakpoint library add_import_path '../stylesheets' # Set to true for easier debugging line_comments = false # preferred_syntax = :sass # CSS output style - :nested, :expanded, :compact, or :compressed output_style = :expanded # Determine whether Compass asset helper functions generate relative # or absolute paths relative_assets = true # Learn more: # http://compass-style.org/docs/tutorials/configuration-reference/ sass_options = {:sourcemap => false}breakpoint-2.7.1/tests/controls/000077500000000000000000000000001302207441000166555ustar00rootroot00000000000000breakpoint-2.7.1/tests/controls/01_pixel.css000066400000000000000000000014701302207441000210120ustar00rootroot00000000000000/* * Assume `default feature` * if only a number * $single-pixel-value: 500px; * $single-em-value: 30em; */ @media (min-width: 500px) { .foo { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } } @media (min-width: 30em) { .foo { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } @media (min-width: 500px) { .foo { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } } @media (min-width: 30em) { .foo { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } @media (min-width: 500px) { .foo { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } } @media (min-width: 30em) { .foo { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } breakpoint-2.7.1/tests/controls/02_pixel_to_em.css000066400000000000000000000012111302207441000221670ustar00rootroot00000000000000/* @include breakpoint-set('to ems', true); */ @media (min-width: 31.25em) { .breakpoint-default-feature-to-ems { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } } @media (min-width: 30em) { .breakpoint-default-feature-to-ems { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } @media (min-width: 31.25em) { .breakpoint-default-feature-to-ems { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } } @media (min-width: 30em) { .breakpoint-default-feature-to-ems { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } breakpoint-2.7.1/tests/controls/03_feature_values.css000066400000000000000000000034201302207441000227020ustar00rootroot00000000000000/* * Single value with feature * $feature-first : height 500px; * $value-first : 500px height; * $arbitrary-feature : lion 500px; * $feature-value-both-strings : portrait orientation; */ @media (height: 500px) { .foo { content: '$feature-first'; content: '@media (height: 500px)'; } } @media (height: 500px) { .foo { content: '$value-first'; content: '@media (height: 500px)'; } } @media (lion: 500px) { .foo { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } } @media (orientation: portrait) { .foo { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } } @media (height: 500px) { .foo { content: '$feature-first'; content: '@media (height: 500px)'; } } @media (height: 500px) { .foo { content: '$value-first'; content: '@media (height: 500px)'; } } @media (lion: 500px) { .foo { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } } @media (orientation: portrait) { .foo { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } } @media (height: 31.25em) { .bar { content: '$feature-first'; content: '@media (height: 31.25em)'; } } @media (height: 31.25em) { .bar { content: '$value-first'; content: '@media (height: 31.25em)'; } } @media (lion: 31.25em) { .bar { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } } @media (height: 31.25em) { .bar { content: '$feature-first'; content: '@media (height: 31.25em)'; } } @media (height: 31.25em) { .bar { content: '$value-first'; content: '@media (height: 31.25em)'; } } @media (lion: 31.25em) { .bar { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } } breakpoint-2.7.1/tests/controls/04_min_max.css000066400000000000000000000014541302207441000213260ustar00rootroot00000000000000/* * Set min-width/max-width * if both values are numbers * $min-max-default-feature : 500px 700px; */ @media (min-width: 500px) and (max-width: 700px) { .foo { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } } @media (min-width: 500px) and (max-width: 700px) { .foo { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } } @media (min-width: 31.25em) and (max-width: 43.75em) { .bar { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } } @media (min-width: 31.25em) and (max-width: 43.75em) { .bar { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } } breakpoint-2.7.1/tests/controls/05_min_max_feature.css000066400000000000000000000047231302207441000230440ustar00rootroot00000000000000/* * Set min/max of feature * if there are two numbers and a feature * $feature-min-max : height 300px 700px; * $min-max-feature : 300px 700px height; * $arbitrary-feature-min-max : lion 300px 700px; */ @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-lion: 300px) and (max-lion: 700px) { .min-max-feature { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-lion: 300px) and (max-lion: 700px) { .min-max-feature { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } } /* @include breakpoint-set('to ems', true); */ @media (min-height: 18.75em) and (max-height: 43.75em) { .min-max-feature-to-ems { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-height: 18.75em) and (max-height: 43.75em) { .min-max-feature-to-ems { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-lion: 18.75em) and (max-lion: 43.75em) { .min-max-feature-to-ems { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } } @media (min-height: 18.75em) and (max-height: 43.75em) { .min-max-feature-to-ems { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-height: 18.75em) and (max-height: 43.75em) { .min-max-feature-to-ems { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-lion: 18.75em) and (max-lion: 43.75em) { .min-max-feature-to-ems { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } } breakpoint-2.7.1/tests/controls/06_multidemensional.css000066400000000000000000000016461302207441000232540ustar00rootroot00000000000000/* * Multidimensional lists, * assume each item is a feature value pair * $multidimensional : height 500px portrait orientation; */ @media (height: 500px) and (orientation: portrait) { .multidimensional { content: '$multidimensional'; content: '@media (height: 500px) and (orientation: portrait)'; } } @media (height: 500px) and (orientation: portrait) { .multidimensional { content: '$multidimensional'; content: '@media (height: 500px) and (orientation: portrait)'; } } /* @include breakpoint-set('to ems', true); */ @media (height: 31.25em) and (orientation: portrait) { .multidimensional-to-ems { content: '$multidimensional'; content: '@media (height: 31.25em) and (orientation: portrait)'; } } @media (height: 31.25em) and (orientation: portrait) { .multidimensional-to-ems { content: '$multidimensional'; content: '@media (height: 31.25em) and (orientation: portrait)'; } } breakpoint-2.7.1/tests/controls/07_basic_or.css000066400000000000000000000031461302207441000214620ustar00rootroot00000000000000/* * 'OR' mediaqueries. * tests separated by commas * $basic-or : max-width 350px, 500px 600px; * $basic-or-media : 500px, tv 700px color; */ @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or { content: '$basic-or'; content: '@media (max-width: 350px), (min-width: 500px) and (max-width: 600px)'; } } @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or { content: '$basic-or'; content: '@media (max-width: 350px), (min-width: 500px) and (max-width: 600px)'; } } @media (min-width: 500px), tv and (min-width: 700px) and (color) { .basic-or-media { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } } @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or-media { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } } @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or-media { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } } /* @include breakpoint-set('to ems', true); */ @media (max-width: 21.875em), (min-width: 31.25em) and (max-width: 37.5em) { .basic-or-to-ems { content: '$basic-or'; content: '@media (min-width: 31.25em), tv and (min-width: 43.75em) and (color)'; } } @media (max-width: 21.875em), (min-width: 31.25em) and (max-width: 37.5em) { .basic-or-to-ems { content: '$basic-or'; content: '@media (min-width: 31.25em), tv and (min-width: 43.75em) and (color)'; } } breakpoint-2.7.1/tests/controls/08_one_sided_feature.css000066400000000000000000000037731302207441000233540ustar00rootroot00000000000000/* * One-sided features (ie. monochrome) * $monochrome : monochrome; * $monochrome-double : 300px monochrome; * $multidimensional-plus-one-sided : height 500px portrait orientation monochrome; */ @media (monochrome) { .one-sided { content: '$monochrome'; content: '@media (monochrome)'; } } @media (monochrome) and (min-width: 300px) { .one-sided { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } } @media (height: 500px) and (orientation: portrait) and (monochrome) { .one-sided { content: '$multidimensional-plus-one-sided'; content: '@media (height: 500px) and (orientation: portrait) and (monochrome)'; } } @media (monochrome) { .one-sided { content: '$monochrome'; content: '@media (monochrome)'; } } @media (monochrome) and (min-width: 300px) { .one-sided { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } } @media (height: 500px) and (orientation: portrait) and (monochrome) { .one-sided { content: '$multidimensional-plus-one-sided'; content: '@media (height: 500px) and (orientation: portrait) and (monochrome)'; } } /* @include breakpoint-set('to ems', true); */ @media (monochrome) and (min-width: 18.75em) { .one-sided-to-ems { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } } @media (height: 31.25em) and (orientation: portrait) and (monochrome) { .one-sided-to-ems { content: '$multidimensional-plus-one-sided'; content: '@media (height: 31.25em) and (orientation: portrait) and (monochrome)'; } } @media (monochrome) and (min-width: 18.75em) { .one-sided-to-ems { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } } @media (height: 31.25em) and (orientation: portrait) and (monochrome) { .one-sided-to-ems { content: '$multidimensional-plus-one-sided'; content: '@media (height: 31.25em) and (orientation: portrait) and (monochrome)'; } } breakpoint-2.7.1/tests/controls/09_not.css000066400000000000000000000010221302207441000204720ustar00rootroot00000000000000/* * One-sided features (ie. monochrome) * $not : not screen; */ @media not screen { .not { content: '$not'; content: '@media not screen'; } } @media not tv and (min-width: 500px) { .not { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } } @media not screen { .not { content: '$not'; content: '@media not screen'; } } @media not tv and (min-width: 500px) { .not { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } } breakpoint-2.7.1/tests/controls/10_double_string.css000066400000000000000000000014061302207441000225300ustar00rootroot00000000000000/* * Double string feature (i.e. string: string) * $aspect-ratio : min-aspect-ratio 300/250; * $device-aspect-ratio : max-device-aspect-ratio 320/480; */ @media (min-aspect-ratio: 300 / 250) { .aspect-ratio { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } } @media (max-device-aspect-ratio: 320 / 480) { .aspect-ratio { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } } @media (min-aspect-ratio: 300 / 250) { .aspect-ratio { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } } @media (max-device-aspect-ratio: 320 / 480) { .aspect-ratio { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } } breakpoint-2.7.1/tests/controls/11_legacy_syntax.css000066400000000000000000000004641302207441000225460ustar00rootroot00000000000000/* * Legacy syntax */ @media not screen and (min-width: 500px) { .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } } @media not screen and (min-width: 500px) { .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } } breakpoint-2.7.1/tests/controls/12_breakpoint_resolutions.css000066400000000000000000000031131302207441000244730ustar00rootroot00000000000000/* * Resolution queries, device pixel ratio and standard resolution * $device-pixel-ratio: resolution 2dppx * $resolution: min-resolution 192dpi */ @media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi) { .resolution { content: "resolution" 2dppx; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } } @media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) { .resolution { content: "min-resolution" 192dpi; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } } @media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi) { .resolution { content: "resolution" 2dppx; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } } @media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) { .resolution { content: "min-resolution" 192dpi; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } } @media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi) { .resolution { content: "resolution" 2dppx; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } } breakpoint-2.7.1/tests/controls/13_context_simple.css000066400000000000000000000040101302207441000227220ustar00rootroot00000000000000/* * Queries to test Breakpoint Get Context * $context-simple: 500px * $context-single: monochrome * $context-and: 500px 700px * $context-max: max-width 700px * $context-string: orientation portrait * $context-triple: height 800px 1000px * $context-media-type: print * $context-or: 500px max-height 1200px, 600px 700px * $context-complex: 500px, screen 500px 700px, 300px monochrome */ @media (min-width: 500px) { .context { content: '@media (min-width: 500px)'; -min-width: 500px; } } @media (monochrome) { .context { content: '@media (monochrome)'; -monochrome: monochrome; } } @media (min-width: 500px) and (max-width: 700px) { .context { content: '@media (min-width: 500px) and (max-width: 700px)'; -min-width: 500px; -max-width: 700px; } } @media (max-width: 700px) { .context { content: '@media (max-width: 700px)'; -max-width: 700px; } } @media (orientation: portrait) { .context { content: '@media (orientation: portrait)'; -orientation: portrait; } } @media (min-height: 800px) and (max-height: 1000px) { .context { content: '@media (min-height: 800px) and (max-height: 1000px)'; -min-height: 800px; -max-height: 1000px; } } @media print { .context { content: '@media print'; -media: print; } } @media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px) { .context { content: '@media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px)'; -min-width: 500px 600px; -max-width: false 700px; -max-height: 1200px false; -orientation: false; } } @media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px) { .context { content: '@media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px)'; -min-width: 500px 500px 300px; -max-width: false 700px false; -media: all screen all; -monochrome: false false monochrome; } } breakpoint-2.7.1/tests/controls/14_context_complex.css000066400000000000000000000002061302207441000231040ustar00rootroot00000000000000/** * Dynamic contexts. */ @media (min-width: 300px), print, (min-width: 200px) { #multi-media { -media: all print all; } } breakpoint-2.7.1/tests/controls/15_no_query_fallback.css000066400000000000000000000007241302207441000233570ustar00rootroot00000000000000/** * IE no-query fallbacks. */ /* * Legacy syntax */ .no-mq .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } .no-mq .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } /* * No Query */ .no-mq .no-query { _query: "700px, no-query .no-mq"; _expected: "@media (min-width: 700px)"; } .no-mq .no-query { _query: "700px, no-query .no-mq"; _expected: "@media (min-width: 700px)"; } breakpoint-2.7.1/tests/controls/16_media.css000066400000000000000000000034641302207441000207630ustar00rootroot00000000000000/* * Media features (ie. tv) * $simple-media : tv; * $media-plus-default : tv 500px; * $media-plus-fence : tv 500px 700px; * $media-only : only print; * $media-not : not print; * $media-not-plus-fenced : not print 500px 700px; */ @media tv { .media { content: '$simple-media'; content: '@media tv'; } } @media tv and (min-width: 500px) { .media { content: '$media-plus-default'; content: '@media not tv and (min-width: 500px)'; } } @media tv and (min-width: 500px) and (max-width: 700px) { .media { content: '$media-plus-fence'; content: '@media tv and (min-width: 500px) and (max-width: 700px)'; } } @media only print { .media { content: '$media-only'; content: '@media only print'; } } @media not print { .media { content: '$media-not)'; content: '@media not print'; } } @media not print and (min-width: 500px) and (max-width: 700px) { .media { content: '$media-not-plus-fenced'; content: '@media not print and (min-width: 500px) and (max-width: 700px)'; } } @media tv { .media { content: '$simple-media'; content: '@media tv'; } } @media tv and (min-width: 500px) { .media { content: '$media-plus-default'; content: '@media not tv and (min-width: 500px)'; } } @media tv and (min-width: 500px) and (max-width: 700px) { .media { content: '$media-plus-fence'; content: '@media tv and (min-width: 500px) and (max-width: 700px)'; } } @media only print { .media { content: '$media-only'; content: '@media only print'; } } @media not print { .media { content: '$media-not)'; content: '@media not print'; } } @media not print and (min-width: 500px) and (max-width: 700px) { .media { content: '$media-not-plus-fenced'; content: '@media not print and (min-width: 500px) and (max-width: 700px)'; } } breakpoint-2.7.1/tests/controls/17_breakpoint_function.css000066400000000000000000000043111302207441000237400ustar00rootroot00000000000000/** * Breakpoint Function * - Returns either a map of the query, fallback, context, and query count or a map of context values **/ .query { /* Single Pixel Value */ _test: "breakpoint(500px)"; _query: " (min-width: 500px)"; _fallback: false; _context-holder: (min-width: 500px); _query-count: 1; /* Fenced with Media */ _test: "breakpoint(not print 500px 700px)"; _query: "not print and (min-width: 500px) and (max-width: 700px)"; _fallback: false; _context-holder: (media: "not print", min-width: 500px, max-width: 700px); _query-count: 1; /* Or Query */ _test: "breakpoint(400px min-height 200px, 300px 325px orientation portriat monochrome)"; _query: " (min-width: 400px) and (min-height: 200px), (min-width: 300px) and (max-width: 325px) and (orientation: portriat) and (monochrome)"; _fallback: false; _context-holder: (min-width: 400px 300px, "min-height": 200px false, max-width: false 325px, orientation: false portriat, "monochrome": false monochrome); _query-count: 2; /* No Query */ _test: "breakpoint(700px, no-query .no-mq)"; _query: " (min-width: 700px)"; _fallback: ".no-mq"; _context-holder: (min-width: 700px); _query-count: 1; /* No Query, Or */ _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _query: "not screen, (min-width: 500px)"; _fallback: ".no-mq"; _context-holder: (media: "not screen" all, min-width: false 500px); _query-count: 2; } .context { /* Single Pixel Value */ _test: "breakpoint(500px, 'min-width')"; _min-width: 500px; _height: false; _no-query: false; /* Fenced with Media */ _test: "breakpoint(not print 500px 700px, 'min-width', 'max-width', 'media')"; _min-width: 500px; _max-width: 700px; _media: "not print"; /* Or Query */ _test: "breakpoint(400px min-height 200px, 300px 325px orientation portriat monochrome)"; _min-width: 400px 300px; _min-height: 200px false; _orientation: false portriat; _no-query: false; /* No Query */ _test: "breakpoint(700px, no-query .no-mq)"; _min-width: 700px; _media: all; _no-query: ".no-mq"; /* No Query, Or */ _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; } breakpoint-2.7.1/tests/controls/18_pixel-memo.css000066400000000000000000000014701302207441000217550ustar00rootroot00000000000000/* * Assume `default feature` * if only a number * $single-pixel-value: 500px; * $single-em-value: 30em; */ @media (min-width: 500px) { .foo { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } } @media (min-width: 30em) { .foo { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } @media (min-width: 500px) { .foo { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } } @media (min-width: 30em) { .foo { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } @media (min-width: 500px) { .foo { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } } @media (min-width: 30em) { .foo { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } breakpoint-2.7.1/tests/controls/19_pixel_to_em-memo.css000066400000000000000000000012111302207441000231320ustar00rootroot00000000000000/* @include breakpoint-set('to ems', true); */ @media (min-width: 31.25em) { .breakpoint-default-feature-to-ems { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } } @media (min-width: 30em) { .breakpoint-default-feature-to-ems { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } @media (min-width: 31.25em) { .breakpoint-default-feature-to-ems { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } } @media (min-width: 30em) { .breakpoint-default-feature-to-ems { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } breakpoint-2.7.1/tests/controls/20_feature_values-memo.css000066400000000000000000000034041302207441000236360ustar00rootroot00000000000000/* * Single value with feature * $feature-first : height 500px; * $value-first : 500px height; * $arbitrary-feature : lion 500px; * $feature-value-both-strings : portrait orientation; */ @media (height: 500px) { .foo { content: '$feature-first'; content: '@media (height: 500px)'; } } @media (height: 500px) { .foo { content: '$value-first'; content: '@media (height: 500px)'; } } @media (lion: 500px) { .foo { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } } @media (orientation: portrait) { .foo { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } } @media (height: 500px) { .foo { content: '$feature-first'; content: '@media (height: 500px)'; } } @media (height: 500px) { .foo { content: '$value-first'; content: '@media (height: 500px)'; } } @media (lion: 500px) { .foo { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } } @media (orientation: portrait) { .foo { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } } @media (height: 500px) { .bar { content: '$feature-first'; content: '@media (height: 31.25em)'; } } @media (height: 500px) { .bar { content: '$value-first'; content: '@media (height: 31.25em)'; } } @media (lion: 500px) { .bar { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } } @media (height: 500px) { .bar { content: '$feature-first'; content: '@media (height: 31.25em)'; } } @media (height: 500px) { .bar { content: '$value-first'; content: '@media (height: 31.25em)'; } } @media (lion: 500px) { .bar { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } } breakpoint-2.7.1/tests/controls/21_min_max-memo.css000066400000000000000000000014441302207441000222570ustar00rootroot00000000000000/* * Set min-width/max-width * if both values are numbers * $min-max-default-feature : 500px 700px; */ @media (min-width: 500px) and (max-width: 700px) { .foo { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } } @media (min-width: 500px) and (max-width: 700px) { .foo { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } } @media (min-width: 500px) and (max-width: 700px) { .bar { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } } @media (min-width: 500px) and (max-width: 700px) { .bar { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } } breakpoint-2.7.1/tests/controls/22_min_max_feature-memo.css000066400000000000000000000046731302207441000240020ustar00rootroot00000000000000/* * Set min/max of feature * if there are two numbers and a feature * $feature-min-max : height 300px 700px; * $min-max-feature : 300px 700px height; * $arbitrary-feature-min-max : lion 300px 700px; */ @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-lion: 300px) and (max-lion: 700px) { .min-max-feature { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } } @media (min-lion: 300px) and (max-lion: 700px) { .min-max-feature { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } } /* @include breakpoint-set('to ems', true); */ @media (min-height: 300px) and (max-height: 700px) { .min-max-feature-to-ems { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature-to-ems { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-lion: 300px) and (max-lion: 700px) { .min-max-feature-to-ems { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature-to-ems { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-height: 300px) and (max-height: 700px) { .min-max-feature-to-ems { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } } @media (min-lion: 300px) and (max-lion: 700px) { .min-max-feature-to-ems { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } } breakpoint-2.7.1/tests/controls/23_multidemensional-memo.css000066400000000000000000000016421302207441000242020ustar00rootroot00000000000000/* * Multidimensional lists, * assume each item is a feature value pair * $multidimensional : height 500px portrait orientation; */ @media (height: 500px) and (orientation: portrait) { .multidimensional { content: '$multidimensional'; content: '@media (height: 500px) and (orientation: portrait)'; } } @media (height: 500px) and (orientation: portrait) { .multidimensional { content: '$multidimensional'; content: '@media (height: 500px) and (orientation: portrait)'; } } /* @include breakpoint-set('to ems', true); */ @media (height: 500px) and (orientation: portrait) { .multidimensional-to-ems { content: '$multidimensional'; content: '@media (height: 31.25em) and (orientation: portrait)'; } } @media (height: 500px) and (orientation: portrait) { .multidimensional-to-ems { content: '$multidimensional'; content: '@media (height: 31.25em) and (orientation: portrait)'; } } breakpoint-2.7.1/tests/controls/24_basic_or-memo.css000066400000000000000000000031321302207441000224070ustar00rootroot00000000000000/* * 'OR' mediaqueries. * tests separated by commas * $basic-or : max-width 350px, 500px 600px; * $basic-or-media : 500px, tv 700px color; */ @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or { content: '$basic-or'; content: '@media (max-width: 350px), (min-width: 500px) and (max-width: 600px)'; } } @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or { content: '$basic-or'; content: '@media (max-width: 350px), (min-width: 500px) and (max-width: 600px)'; } } @media (min-width: 500px), tv and (min-width: 700px) and (color) { .basic-or-media { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } } @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or-media { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } } @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or-media { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } } /* @include breakpoint-set('to ems', true); */ @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or-to-ems { content: '$basic-or'; content: '@media (min-width: 31.25em), tv and (min-width: 43.75em) and (color)'; } } @media (max-width: 350px), (min-width: 500px) and (max-width: 600px) { .basic-or-to-ems { content: '$basic-or'; content: '@media (min-width: 31.25em), tv and (min-width: 43.75em) and (color)'; } } breakpoint-2.7.1/tests/controls/25_one_sided_feature-memo.css000066400000000000000000000037631302207441000243050ustar00rootroot00000000000000/* * One-sided features (ie. monochrome) * $monochrome : monochrome; * $monochrome-double : 300px monochrome; * $multidimensional-plus-one-sided : height 500px portrait orientation monochrome; */ @media (monochrome) { .one-sided { content: '$monochrome'; content: '@media (monochrome)'; } } @media (monochrome) and (min-width: 300px) { .one-sided { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } } @media (height: 500px) and (orientation: portrait) and (monochrome) { .one-sided { content: '$multidimensional-plus-one-sided'; content: '@media (height: 500px) and (orientation: portrait) and (monochrome)'; } } @media (monochrome) { .one-sided { content: '$monochrome'; content: '@media (monochrome)'; } } @media (monochrome) and (min-width: 300px) { .one-sided { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } } @media (height: 500px) and (orientation: portrait) and (monochrome) { .one-sided { content: '$multidimensional-plus-one-sided'; content: '@media (height: 500px) and (orientation: portrait) and (monochrome)'; } } /* @include breakpoint-set('to ems', true); */ @media (monochrome) and (min-width: 300px) { .one-sided-to-ems { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } } @media (height: 500px) and (orientation: portrait) and (monochrome) { .one-sided-to-ems { content: '$multidimensional-plus-one-sided'; content: '@media (height: 31.25em) and (orientation: portrait) and (monochrome)'; } } @media (monochrome) and (min-width: 300px) { .one-sided-to-ems { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } } @media (height: 500px) and (orientation: portrait) and (monochrome) { .one-sided-to-ems { content: '$multidimensional-plus-one-sided'; content: '@media (height: 31.25em) and (orientation: portrait) and (monochrome)'; } } breakpoint-2.7.1/tests/controls/26_not-memo.css000066400000000000000000000010221302207441000214240ustar00rootroot00000000000000/* * One-sided features (ie. monochrome) * $not : not screen; */ @media not screen { .not { content: '$not'; content: '@media not screen'; } } @media not tv and (min-width: 500px) { .not { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } } @media not screen { .not { content: '$not'; content: '@media not screen'; } } @media not tv and (min-width: 500px) { .not { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } } breakpoint-2.7.1/tests/controls/27_double_string-memo.css000066400000000000000000000014061302207441000234730ustar00rootroot00000000000000/* * Double string feature (i.e. string: string) * $aspect-ratio : min-aspect-ratio 300/250; * $device-aspect-ratio : max-device-aspect-ratio 320/480; */ @media (min-aspect-ratio: 300 / 250) { .aspect-ratio { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } } @media (max-device-aspect-ratio: 320 / 480) { .aspect-ratio { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } } @media (min-aspect-ratio: 300 / 250) { .aspect-ratio { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } } @media (max-device-aspect-ratio: 320 / 480) { .aspect-ratio { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } } breakpoint-2.7.1/tests/controls/28_legacy_syntax-memo.css000066400000000000000000000004641302207441000235110ustar00rootroot00000000000000/* * Legacy syntax */ @media not screen and (min-width: 500px) { .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } } @media not screen and (min-width: 500px) { .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } } breakpoint-2.7.1/tests/controls/29_breakpoint_resolutions-memo.css000066400000000000000000000031131302207441000254360ustar00rootroot00000000000000/* * Resolution queries, device pixel ratio and standard resolution * $device-pixel-ratio: resolution 2dppx * $resolution: min-resolution 192dpi */ @media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi) { .resolution { content: "resolution" 2dppx; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } } @media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) { .resolution { content: "min-resolution" 192dpi; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } } @media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi) { .resolution { content: "resolution" 2dppx; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } } @media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) { .resolution { content: "min-resolution" 192dpi; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } } @media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi) { .resolution { content: "resolution" 2dppx; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } } breakpoint-2.7.1/tests/controls/30_context_simple-memo.css000066400000000000000000000040101302207441000236540ustar00rootroot00000000000000/* * Queries to test Breakpoint Get Context * $context-simple: 500px * $context-single: monochrome * $context-and: 500px 700px * $context-max: max-width 700px * $context-string: orientation portrait * $context-triple: height 800px 1000px * $context-media-type: print * $context-or: 500px max-height 1200px, 600px 700px * $context-complex: 500px, screen 500px 700px, 300px monochrome */ @media (min-width: 500px) { .context { content: '@media (min-width: 500px)'; -min-width: 500px; } } @media (monochrome) { .context { content: '@media (monochrome)'; -monochrome: monochrome; } } @media (min-width: 500px) and (max-width: 700px) { .context { content: '@media (min-width: 500px) and (max-width: 700px)'; -min-width: 500px; -max-width: 700px; } } @media (max-width: 700px) { .context { content: '@media (max-width: 700px)'; -max-width: 700px; } } @media (orientation: portrait) { .context { content: '@media (orientation: portrait)'; -orientation: portrait; } } @media (min-height: 800px) and (max-height: 1000px) { .context { content: '@media (min-height: 800px) and (max-height: 1000px)'; -min-height: 800px; -max-height: 1000px; } } @media print { .context { content: '@media print'; -media: print; } } @media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px) { .context { content: '@media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px)'; -min-width: 500px 600px; -max-width: false 700px; -max-height: 1200px false; -orientation: false; } } @media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px) { .context { content: '@media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px)'; -min-width: 500px 500px 300px; -max-width: false 700px false; -media: all screen all; -monochrome: false false monochrome; } } breakpoint-2.7.1/tests/controls/31_context_complex-memo.css000066400000000000000000000002061302207441000240360ustar00rootroot00000000000000/** * Dynamic contexts. */ @media (min-width: 300px), print, (min-width: 200px) { #multi-media { -media: all print all; } } breakpoint-2.7.1/tests/controls/32_no_query_fallback-memo.css000066400000000000000000000007241302207441000243110ustar00rootroot00000000000000/** * IE no-query fallbacks. */ /* * Legacy syntax */ .no-mq .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } .no-mq .legacy { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } /* * No Query */ .no-mq .no-query { _query: "700px, no-query .no-mq"; _expected: "@media (min-width: 700px)"; } .no-mq .no-query { _query: "700px, no-query .no-mq"; _expected: "@media (min-width: 700px)"; } breakpoint-2.7.1/tests/controls/33_media-memo.css000066400000000000000000000034641302207441000217150ustar00rootroot00000000000000/* * Media features (ie. tv) * $simple-media : tv; * $media-plus-default : tv 500px; * $media-plus-fence : tv 500px 700px; * $media-only : only print; * $media-not : not print; * $media-not-plus-fenced : not print 500px 700px; */ @media tv { .media { content: '$simple-media'; content: '@media tv'; } } @media tv and (min-width: 500px) { .media { content: '$media-plus-default'; content: '@media not tv and (min-width: 500px)'; } } @media tv and (min-width: 500px) and (max-width: 700px) { .media { content: '$media-plus-fence'; content: '@media tv and (min-width: 500px) and (max-width: 700px)'; } } @media only print { .media { content: '$media-only'; content: '@media only print'; } } @media not print { .media { content: '$media-not)'; content: '@media not print'; } } @media not print and (min-width: 500px) and (max-width: 700px) { .media { content: '$media-not-plus-fenced'; content: '@media not print and (min-width: 500px) and (max-width: 700px)'; } } @media tv { .media { content: '$simple-media'; content: '@media tv'; } } @media tv and (min-width: 500px) { .media { content: '$media-plus-default'; content: '@media not tv and (min-width: 500px)'; } } @media tv and (min-width: 500px) and (max-width: 700px) { .media { content: '$media-plus-fence'; content: '@media tv and (min-width: 500px) and (max-width: 700px)'; } } @media only print { .media { content: '$media-only'; content: '@media only print'; } } @media not print { .media { content: '$media-not)'; content: '@media not print'; } } @media not print and (min-width: 500px) and (max-width: 700px) { .media { content: '$media-not-plus-fenced'; content: '@media not print and (min-width: 500px) and (max-width: 700px)'; } } breakpoint-2.7.1/tests/controls/34_breakpoint_function-memo.css000066400000000000000000000043111302207441000246720ustar00rootroot00000000000000/** * Breakpoint Function * - Returns either a map of the query, fallback, context, and query count or a map of context values **/ .query { /* Single Pixel Value */ _test: "breakpoint(500px)"; _query: " (min-width: 500px)"; _fallback: false; _context-holder: (min-width: 500px); _query-count: 1; /* Fenced with Media */ _test: "breakpoint(not print 500px 700px)"; _query: "not print and (min-width: 500px) and (max-width: 700px)"; _fallback: false; _context-holder: (media: "not print", min-width: 500px, max-width: 700px); _query-count: 1; /* Or Query */ _test: "breakpoint(400px min-height 200px, 300px 325px orientation portriat monochrome)"; _query: " (min-width: 400px) and (min-height: 200px), (min-width: 300px) and (max-width: 325px) and (orientation: portriat) and (monochrome)"; _fallback: false; _context-holder: (min-width: 400px 300px, "min-height": 200px false, max-width: false 325px, orientation: false portriat, "monochrome": false monochrome); _query-count: 2; /* No Query */ _test: "breakpoint(700px, no-query .no-mq)"; _query: " (min-width: 700px)"; _fallback: ".no-mq"; _context-holder: (min-width: 700px); _query-count: 1; /* No Query, Or */ _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _query: "not screen, (min-width: 500px)"; _fallback: ".no-mq"; _context-holder: (media: "not screen" all, min-width: false 500px); _query-count: 2; } .context { /* Single Pixel Value */ _test: "breakpoint(500px, 'min-width')"; _min-width: 500px; _height: false; _no-query: false; /* Fenced with Media */ _test: "breakpoint(not print 500px 700px, 'min-width', 'max-width', 'media')"; _min-width: 500px; _max-width: 700px; _media: "not print"; /* Or Query */ _test: "breakpoint(400px min-height 200px, 300px 325px orientation portriat monochrome)"; _min-width: 400px 300px; _min-height: 200px false; _orientation: false portriat; _no-query: false; /* No Query */ _test: "breakpoint(700px, no-query .no-mq)"; _min-width: 700px; _media: all; _no-query: ".no-mq"; /* No Query, Or */ _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; } breakpoint-2.7.1/tests/controls/35_memoization.css000066400000000000000000000616461302207441000222460ustar00rootroot00000000000000/** * Memoized Output * - Compile time should be reduced for like calls **/ .memoize--simple-feature { _memoization: "()"; } .memoize--complex-feature { _memoization: '("breakpoint": ("breakpoint 500px false": ("query": " (min-width: 500px)", "fallback": false, "context holder": (min-width: 500px), "query count": 1)))'; } .memoize--shared-feature { _memoization: '("breakpoint": ("breakpoint 500px false": ("query": " (min-width: 500px)", "fallback": false, "context holder": (min-width: 500px), "query count": 1), "breakpoint height 500px portrait orientation monochrome false": ("query": " (height: 500px) and (orientation: portrait) and (monochrome)", "fallback": false, "context holder": (height: 500px, orientation: portrait, "monochrome": monochrome), "query count": 1)))'; } .memoize--or-query { _memoization: '("breakpoint": ("breakpoint 500px false": ("query": " (min-width: 500px)", "fallback": false, "context holder": (min-width: 500px), "query count": 1), "breakpoint height 500px portrait orientation monochrome false": ("query": " (height: 500px) and (orientation: portrait) and (monochrome)", "fallback": false, "context holder": (height: 500px, orientation: portrait, "monochrome": monochrome), "query count": 1), "breakpoint height 500px false": ("query": " (height: 500px)", "fallback": false, "context holder": (height: 500px), "query count": 1)))'; } .memoize--with-fallback { _memoization: '("breakpoint": ("breakpoint 500px false": ("query": " (min-width: 500px)", "fallback": false, "context holder": (min-width: 500px), "query count": 1), "breakpoint height 500px portrait orientation monochrome false": ("query": " (height: 500px) and (orientation: portrait) and (monochrome)", "fallback": false, "context holder": (height: 500px, orientation: portrait, "monochrome": monochrome), "query count": 1), "breakpoint height 500px false": ("query": " (height: 500px)", "fallback": false, "context holder": (height: 500px), "query count": 1), "breakpoint 400px min-height 200px, 300px 325px orientation portriat monochrome false": ("query": " (min-width: 400px) and (min-height: 200px), (min-width: 300px) and (max-width: 325px) and (orientation: portriat) and (monochrome)", "fallback": false, "context holder": (min-width: 400px 300px, "min-height": 200px false, max-width: false 325px, orientation: false portriat, "monochrome": false monochrome), "query count": 2)))'; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .no-mq .memoize--with-fallback { _test: "breakpoint(700px, no-query .no-mq)"; } .memoize--breakpoint-function-context { _memoization: '("breakpoint": ("breakpoint 500px false": ("query": " (min-width: 500px)", "fallback": false, "context holder": (min-width: 500px), "query count": 1), "breakpoint height 500px portrait orientation monochrome false": ("query": " (height: 500px) and (orientation: portrait) and (monochrome)", "fallback": false, "context holder": (height: 500px, orientation: portrait, "monochrome": monochrome), "query count": 1), "breakpoint height 500px false": ("query": " (height: 500px)", "fallback": false, "context holder": (height: 500px), "query count": 1), "breakpoint 400px min-height 200px, 300px 325px orientation portriat monochrome false": ("query": " (min-width: 400px) and (min-height: 200px), (min-width: 300px) and (max-width: 325px) and (orientation: portriat) and (monochrome)", "fallback": false, "context holder": (min-width: 400px 300px, "min-height": 200px false, max-width: false 325px, orientation: false portriat, "monochrome": false monochrome), "query count": 2), "breakpoint 700px, no-query .no-mq false": ("query": " (min-width: 700px)", "fallback": ".no-mq", "context holder": (min-width: 700px), "query count": 1)))'; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; _test: "breakpoint(not screen, 500px, no-query .no-mq)"; _min-width: false 500px; _media: "not screen" all; _no-query: ".no-mq"; } breakpoint-2.7.1/tests/index.js000066400000000000000000000034371302207441000164660ustar00rootroot00000000000000var sass = require('node-sass'), jsdiff = require('diff'), fs = require('fs-extra'), i = 0, glob = require('glob'); glob('./tests/**/*.scss', function (err, files) { if (err) throw err; files.forEach(function (file) { if (file.charAt(0) !== '_') { sass.render({ file: file, outputStyle: 'expanded', includePaths: [ '../stylesheets/', '../vendor/ruby/2.0.0/gems/sassy-maps-0.4.0/sass/', '../vendor/ruby/2.0.0/gems/breakpoint-2.5.0/stylesheets/' ] }, function(err, result) { if (err) throw err; // console.log(result); var file = result.stats.entry.split('/'); file = file[file.length - 1]; file = file.replace('.scss', '.css'); if (file.charAt(0) !== '_') { fs.readFile('./controls/' + file, function (ctrlErr, ctrlFile) { var diff = jsdiff.diffCss(ctrlFile.toString(), result.css.toString()), diffCount = 0; diff.forEach(function(part){ // green for additions, red for deletions // grey for common parts var color = part.added ? 'green' : part.removed ? 'red' : 'grey'; if (color !== 'grey') { diffCount++; } }); if (diffCount) { console.log(file); diff = jsdiff.createPatch(file, ctrlFile.toString(), result.css.toString()); fs.outputFile('./diff/' + file + '.diff', diff, function (writeErr, writePatch) { if (writeErr) throw writeErr; // throw 'Diff in output for ' + file; }); } }); } }); } }); }); breakpoint-2.7.1/tests/tests/000077500000000000000000000000001302207441000161545ustar00rootroot00000000000000breakpoint-2.7.1/tests/tests/01_pixel.scss000066400000000000000000000016201302207441000204710ustar00rootroot00000000000000@import 'variables'; /* * Assume `default feature` * if only a number * $single-pixel-value: #{$single-pixel-value}; * $single-em-value: #{$single-em-value}; */ .foo { @include breakpoint($single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } @include breakpoint($single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } @include respond-to('single pixel value') { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } @include respond-to('single pixel value, em') { content: '$single-em-value'; content: '@media (min-width: 30em)'; } @include mq($single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 500px)'; } @include mq($single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } breakpoint-2.7.1/tests/tests/02_pixel_to_em.scss000066400000000000000000000011701302207441000216550ustar00rootroot00000000000000@import 'variables'; /* @include breakpoint-set('to ems', true); */ @include breakpoint-set('to ems', true); .breakpoint-default-feature-to-ems { @include breakpoint($single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } @include breakpoint($single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } @include mq($single-pixel-value) { content: '$single-pixel-value'; content: '@media (min-width: 31.25em)'; } @include mq($single-em-value) { content: '$single-em-value'; content: '@media (min-width: 30em)'; } } breakpoint-2.7.1/tests/tests/03_feature_values.scss000066400000000000000000000036161302207441000223730ustar00rootroot00000000000000@import 'variables'; /* * Single value with feature * $feature-first : #{$feature-first}; * $value-first : #{$value-first}; * $arbitrary-feature : #{$arbitrary-feature}; * $feature-value-both-strings : #{$feature-value-both-strings}; */ .foo { @include breakpoint($feature-first) { content: '$feature-first'; content: '@media (height: 500px)'; } @include breakpoint($value-first) { content: '$value-first'; content: '@media (height: 500px)'; } @include breakpoint($arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } @include breakpoint($feature-value-both-strings) { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } @include mq($feature-first) { content: '$feature-first'; content: '@media (height: 500px)'; } @include mq($value-first) { content: '$value-first'; content: '@media (height: 500px)'; } @include mq($arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 500px)'; } @include mq($feature-value-both-strings) { content: '$feature-value-both-strings'; content: '@media (orientation: portrait)'; } } @include breakpoint-set('to ems', true); .bar { @include breakpoint($feature-first) { content: '$feature-first'; content: '@media (height: 31.25em)'; } @include breakpoint($value-first) { content: '$value-first'; content: '@media (height: 31.25em)'; } @include breakpoint($arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } @include mq($feature-first) { content: '$feature-first'; content: '@media (height: 31.25em)'; } @include mq($value-first) { content: '$value-first'; content: '@media (height: 31.25em)'; } @include mq($arbitrary-feature) { content: '$arbitrary-feature'; content: '@media (lion: 31.25em)'; } } breakpoint-2.7.1/tests/tests/04_min_max.scss000066400000000000000000000015051302207441000210050ustar00rootroot00000000000000@import 'variables'; /* * Set min-width/max-width * if both values are numbers * $min-max-default-feature : #{$min-max-default-feature}; */ .foo{ @include breakpoint($min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } @include mq($min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 500px) and (max-width: 700px)'; } } @include breakpoint-set('to ems', true); .bar { @include breakpoint($min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } @include mq($min-max-default-feature) { content: '$min-max-default-feature'; content: '@media (min-width: 31.25em) and (max-width: 43.75em)'; } } breakpoint-2.7.1/tests/tests/05_min_max_feature.scss000066400000000000000000000042001302207441000225140ustar00rootroot00000000000000@import 'variables'; /* * Set min/max of feature * if there are two numbers and a feature * $feature-min-max : #{$feature-min-max}; * $min-max-feature : #{$min-max-feature}; * $arbitrary-feature-min-max : #{$arbitrary-feature-min-max}; */ .min-max-feature { @include breakpoint($feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } @include breakpoint($min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } @include breakpoint($arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } @include mq($feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 300px) and (max-height: 700px)'; } @include mq($min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 300px) and (max-height: 700px)'; } @include mq($arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 300px) and (max-lion: 700px)'; } } /* @include breakpoint-set('to ems', true); */ @include breakpoint-set('to ems', true); .min-max-feature-to-ems { @include breakpoint($feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } @include breakpoint($min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } @include breakpoint($arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } @include mq($feature-min-max) { content: '$feature-min-max'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } @include mq($min-max-feature) { content: '$min-max-feature'; content: '@media (min-height: 18.75em) and (max-height: 43.75em)'; } @include mq($arbitrary-feature-min-max) { content: '$arbitrary-feature-min-max'; content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)'; } } breakpoint-2.7.1/tests/tests/06_multidemensional.scss000066400000000000000000000015411302207441000227300ustar00rootroot00000000000000@import 'variables'; /* * Multidimensional lists, * assume each item is a feature value pair * $multidimensional : #{$multidimensional}; */ .multidimensional { @include breakpoint($multidimensional) { content: '$multidimensional'; content: '@media (height: 500px) and (orientation: portrait)'; } @include mq($multidimensional) { content: '$multidimensional'; content: '@media (height: 500px) and (orientation: portrait)'; } } /* @include breakpoint-set('to ems', true); */ @include breakpoint-set('to ems', true); .multidimensional-to-ems { @include breakpoint($multidimensional) { content: '$multidimensional'; content: '@media (height: 31.25em) and (orientation: portrait)'; } @include mq($multidimensional) { content: '$multidimensional'; content: '@media (height: 31.25em) and (orientation: portrait)'; } } breakpoint-2.7.1/tests/tests/07_basic_or.scss000066400000000000000000000024521302207441000211430ustar00rootroot00000000000000@import 'variables'; /* * 'OR' mediaqueries. * tests separated by commas * $basic-or : #{$basic-or}; * $basic-or-media : #{$basic-or-media}; */ .basic-or { @include breakpoint($basic-or) { content: '$basic-or'; content: '@media (max-width: 350px), (min-width: 500px) and (max-width: 600px)'; } @include respond-to('basic or') { content: '$basic-or'; content: '@media (max-width: 350px), (min-width: 500px) and (max-width: 600px)'; } } .basic-or-media { @include breakpoint($basic-or-media) { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } @include mq($basic-or) { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } @include respond-to('basic or') { content: '$basic-or'; content: '@media (min-width: 500px), tv and (min-width: 700px) and (color)'; } } /* @include breakpoint-set('to ems', true); */ @include breakpoint-set('to ems', true); .basic-or-to-ems { @include breakpoint($basic-or) { content: '$basic-or'; content: '@media (min-width: 31.25em), tv and (min-width: 43.75em) and (color)'; } @include mq($basic-or) { content: '$basic-or'; content: '@media (min-width: 31.25em), tv and (min-width: 43.75em) and (color)'; } } breakpoint-2.7.1/tests/tests/08_one_sided_feature.scss000066400000000000000000000035231302207441000230270ustar00rootroot00000000000000@import 'variables'; /* * One-sided features (ie. monochrome) * $monochrome : #{$monochrome}; * $monochrome-double : #{$monochrome-double}; * $multidimensional-plus-one-sided : #{$multidimensional-plus-one-sided}; */ .one-sided { @include breakpoint($monochrome) { content: '$monochrome'; content: '@media (monochrome)'; } @include breakpoint($monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } @include breakpoint($multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (height: 500px) and (orientation: portrait) and (monochrome)'; } @include mq($monochrome) { content: '$monochrome'; content: '@media (monochrome)'; } @include mq($monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 300px)'; } @include mq($multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (height: 500px) and (orientation: portrait) and (monochrome)'; } } /* @include breakpoint-set('to ems', true); */ @include breakpoint-set('to ems', true); .one-sided-to-ems { @include breakpoint($monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } @include breakpoint($multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (height: 31.25em) and (orientation: portrait) and (monochrome)'; } @include mq($monochrome-double) { content: '$monochrome-double'; content: '@media (monochrome) and (min-width: 18.75em)'; } @include mq($multidimensional-plus-one-sided) { content: '$multidimensional-plus-one-sided'; content: '@media (height: 31.25em) and (orientation: portrait) and (monochrome)'; } } breakpoint-2.7.1/tests/tests/09_not.scss000066400000000000000000000010161302207441000201570ustar00rootroot00000000000000@import 'variables'; /* * One-sided features (ie. monochrome) * $not : #{$not}; */ .not { @include breakpoint($not) { content: '$not'; content: '@media not screen'; } @include breakpoint($not-plus-default) { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } @include mq($not) { content: '$not'; content: '@media not screen'; } @include mq($not-plus-default) { content: '$not-plus-default'; content: '@media not tv and (min-width: 500px)'; } } breakpoint-2.7.1/tests/tests/10_double_string.scss000066400000000000000000000012761302207441000222170ustar00rootroot00000000000000@import 'variables'; /* * Double string feature (i.e. string: string) * $aspect-ratio : #{$aspect-ratio}; * $device-aspect-ratio : #{$device-aspect-ratio}; */ .aspect-ratio { @include breakpoint($aspect-ratio) { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } @include breakpoint($device-aspect-ratio) { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } @include mq($aspect-ratio) { content: '$aspect-ratio'; content: '@media (min-aspect-ratio: 300/250)'; } @include mq($device-aspect-ratio) { content: '$device-aspect-ratio'; content: '@media (max-device-pixel-ratio: 320/480)'; } } breakpoint-2.7.1/tests/tests/11_legacy_syntax.scss000066400000000000000000000005171302207441000222270ustar00rootroot00000000000000@import 'variables'; /* * Legacy syntax */ @include breakpoint-set('legacy syntax', true); .legacy { @include breakpoint($legacy) { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } @include mq($legacy) { content: '$legacy'; content: '@media not screen and (min-width: 500px)'; } } breakpoint-2.7.1/tests/tests/12_breakpoint_resolutions.scss000066400000000000000000000023251302207441000241610ustar00rootroot00000000000000@import 'variables'; /* * Resolution queries, device pixel ratio and standard resolution * $device-pixel-ratio: #{$device-pixel-ratio} * $resolution: #{$resolution} */ @include breakpoint-set('transform resolutions', true); .resolution { @include breakpoint($device-pixel-ratio) { content: $device-pixel-ratio; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } @include breakpoint($resolution) { content: $resolution; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } @include mq($device-pixel-ratio) { content: $device-pixel-ratio; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } @include mq($resolution) { content: $resolution; content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)'; } @include respond-to('device pixel ratio') { content: $device-pixel-ratio; content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-moz-device-pixel-ratio: 2), (resolution: 192dpi)'; } } breakpoint-2.7.1/tests/tests/13_context_simple.scss000066400000000000000000000051031302207441000224100ustar00rootroot00000000000000@import 'variables'; $context-simple: 500px; $context-single: monochrome; $context-and: 500px 700px; $context-max: max-width 700px; $context-string: orientation portrait; $context-triple: height 800px 1000px; $context-media-type: (print); $context-or: (500px) (max-height 1200px), 600px 700px; $context-complex: 500px, (screen) (500px 700px), (300px) (monochrome); /* * Queries to test Breakpoint Get Context * $context-simple: #{$context-simple} * $context-single: #{$context-single} * $context-and: #{$context-and} * $context-max: #{$context-max} * $context-string: #{$context-string} * $context-triple: #{$context-triple} * $context-media-type: #{$context-media-type} * $context-or: #{$context-or} * $context-complex: #{$context-complex} */ .context { @include breakpoint($context-simple) { content: '@media (min-width: 500px)'; -min-width: breakpoint-get-context(min-width); } @include breakpoint($context-single) { content: '@media (monochrome)'; -monochrome: breakpoint-get-context(monochrome); } @include breakpoint($context-and) { content: '@media (min-width: 500px) and (max-width: 700px)'; -min-width: breakpoint-get-context(min-width); -max-width: breakpoint-get-context(max-width); } @include breakpoint($context-max) { content: '@media (max-width: 700px)'; -max-width: breakpoint-get-context(max-width); } @include breakpoint($context-string) { content: '@media (orientation: portrait)'; -orientation: breakpoint-get-context(orientation); } @include breakpoint($context-triple) { content: '@media (min-height: 800px) and (max-height: 1000px)'; -min-height: breakpoint-get-context(min-height); -max-height: breakpoint-get-context(max-height); } @include breakpoint($context-media-type) { content: '@media print'; -media: breakpoint-get-context(media); } @include breakpoint($context-or) { content: '@media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px)'; -min-width: breakpoint-get-context(min-width); -max-width: breakpoint-get-context(max-width); -max-height: breakpoint-get-context(max-height); -orientation: breakpoint-get-context(orientation); } @include breakpoint($context-complex) { content: '@media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px)'; -min-width: breakpoint-get-context(min-width); -max-width: breakpoint-get-context(max-width); -media: breakpoint-get-context(media); -monochrome: breakpoint-get-context(monochrome); } } breakpoint-2.7.1/tests/tests/14_context_complex.scss000066400000000000000000000005001302207441000225630ustar00rootroot00000000000000@import 'variables'; /** * Dynamic contexts. */ #dynamic { // What test do we want here? @include breakpoint($dynamic-context) { // What test do we want here? } } $multi-media: 300px, print, 200px; #multi-media { @include breakpoint($multi-media) { -media: breakpoint-get-context('media'); } }breakpoint-2.7.1/tests/tests/15_no_query_fallback.scss000066400000000000000000000006621302207441000230420ustar00rootroot00000000000000/** * IE no-query fallbacks. */ @import "breakpoint"; @include breakpoint-set('no queries', true); @include breakpoint-set('no query fallbacks', '.no-mq'); @import '11_legacy_syntax'; /* * No Query */ .no-query { @include breakpoint($no-query) { _query: "#{$no-query}"; _expected: "@media (min-width: 700px)"; } @include mq($no-query) { _query: "#{$no-query}"; _expected: "@media (min-width: 700px)"; } }breakpoint-2.7.1/tests/tests/16_media.scss000066400000000000000000000034061302207441000204410ustar00rootroot00000000000000@import 'variables'; /* * Media features (ie. tv) * $simple-media : #{$simple-media}; * $media-plus-default : #{$media-plus-default}; * $media-plus-fence : #{$media-plus-fence}; * $media-only : #{$media-only}; * $media-not : #{$media-not}; * $media-not-plus-fenced : #{$media-not-plus-fenced}; */ .media { @include breakpoint($simple-media) { content: '$simple-media'; content: '@media tv'; } @include breakpoint($media-plus-default) { content: '$media-plus-default'; content: '@media not tv and (min-width: 500px)'; } @include breakpoint($media-plus-fence) { content: '$media-plus-fence'; content: '@media tv and (min-width: 500px) and (max-width: 700px)'; } @include breakpoint($media-only) { content: '$media-only'; content: '@media only print'; } @include breakpoint($media-not) { content: '$media-not)'; content: '@media not print'; } @include breakpoint($media-not-plus-fenced) { content: '$media-not-plus-fenced'; content: '@media not print and (min-width: 500px) and (max-width: 700px)'; } @include mq($simple-media) { content: '$simple-media'; content: '@media tv'; } @include mq($media-plus-default) { content: '$media-plus-default'; content: '@media not tv and (min-width: 500px)'; } @include mq($media-plus-fence) { content: '$media-plus-fence'; content: '@media tv and (min-width: 500px) and (max-width: 700px)'; } @include mq($media-only) { content: '$media-only'; content: '@media only print'; } @include mq($media-not) { content: '$media-not)'; content: '@media not print'; } @include mq($media-not-plus-fenced) { content: '$media-not-plus-fenced'; content: '@media not print and (min-width: 500px) and (max-width: 700px)'; } } breakpoint-2.7.1/tests/tests/17_breakpoint_function.scss000066400000000000000000000045641302207441000234340ustar00rootroot00000000000000@import "variables"; @mixin breakpoint-test-query($mq) { $bkpt: breakpoint($mq); _query: inspect(map-get($bkpt, 'query')); _fallback: inspect(map-get($bkpt, 'fallback')); _context-holder: inspect(map-get($bkpt, 'context holder')); _query-count: inspect(map-get($bkpt, 'query count')); } @mixin breakpoint-test-context($mq, $contexts) { $bkpt: breakpoint($mq, $contexts); @each $k, $v in $bkpt { _#{$k}: inspect($v); } } /** * Breakpoint Function * - Returns either a map of the query, fallback, context, and query count or a map of context values **/ .query { /* Single Pixel Value */ _test: "breakpoint(#{$single-pixel-value})"; @include breakpoint-test-query($single-pixel-value); /* Fenced with Media */ _test: "breakpoint(#{$media-not-plus-fenced})"; @include breakpoint-test-query($media-not-plus-fenced); /* Or Query */ _test: "breakpoint(#{$dynamic-context})"; @include breakpoint-test-query($dynamic-context); /* No Query */ _test: "breakpoint(#{$no-query})"; @include breakpoint-test-query($no-query); /* No Query, Or */ _test: "breakpoint(#{$legacy})"; @include breakpoint-test-query($legacy); } .context { /* Single Pixel Value */ _test: "breakpoint(#{$single-pixel-value}, 'min-width')"; $bkpt: breakpoint($single-pixel-value, 'min-width', 'height', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } /* Fenced with Media */ _test: "breakpoint(#{$media-not-plus-fenced}, 'min-width', 'max-width', 'media')"; $bkpt: breakpoint($media-not-plus-fenced, 'min-width', 'max-width', 'media'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } /* Or Query */ _test: "breakpoint(#{$dynamic-context})"; $bkpt: breakpoint($dynamic-context, 'min-width', 'min-height', 'orientation', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } /* No Query */ _test: "breakpoint(#{$no-query})"; $bkpt: breakpoint($no-query, 'min-width', 'media', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } /* No Query, Or */ _test: "breakpoint(#{$legacy})"; $bkpt: breakpoint($legacy, 'min-width', 'media', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } }breakpoint-2.7.1/tests/tests/18_pixel-memo.scss000066400000000000000000000000441302207441000214330ustar00rootroot00000000000000@import "memo"; @import "01_pixel";breakpoint-2.7.1/tests/tests/19_pixel_to_em-memo.scss000066400000000000000000000000521302207441000226160ustar00rootroot00000000000000@import "memo"; @import "02_pixel_to_em";breakpoint-2.7.1/tests/tests/20_feature_values-memo.scss000066400000000000000000000000551302207441000233170ustar00rootroot00000000000000@import "memo"; @import "03_feature_values";breakpoint-2.7.1/tests/tests/21_min_max-memo.scss000066400000000000000000000000461302207441000217360ustar00rootroot00000000000000@import "memo"; @import "04_min_max";breakpoint-2.7.1/tests/tests/22_min_max_feature-memo.scss000066400000000000000000000000561302207441000234530ustar00rootroot00000000000000@import "memo"; @import "05_min_max_feature";breakpoint-2.7.1/tests/tests/23_multidemensional-memo.scss000066400000000000000000000000571302207441000236630ustar00rootroot00000000000000@import "memo"; @import "06_multidemensional";breakpoint-2.7.1/tests/tests/24_basic_or-memo.scss000066400000000000000000000000471302207441000220730ustar00rootroot00000000000000@import "memo"; @import "07_basic_or";breakpoint-2.7.1/tests/tests/25_one_sided_feature-memo.scss000066400000000000000000000000601302207441000237520ustar00rootroot00000000000000@import "memo"; @import "08_one_sided_feature";breakpoint-2.7.1/tests/tests/26_not-memo.scss000066400000000000000000000000421302207441000211070ustar00rootroot00000000000000@import "memo"; @import "09_not";breakpoint-2.7.1/tests/tests/27_double_string-memo.scss000066400000000000000000000000541302207441000231530ustar00rootroot00000000000000@import "memo"; @import "10_double_string";breakpoint-2.7.1/tests/tests/28_legacy_syntax-memo.scss000066400000000000000000000000541302207441000231660ustar00rootroot00000000000000@import "memo"; @import "11_legacy_syntax";breakpoint-2.7.1/tests/tests/29_breakpoint_resolutions-memo.scss000066400000000000000000000000651302207441000251230ustar00rootroot00000000000000@import "memo"; @import "12_breakpoint_resolutions";breakpoint-2.7.1/tests/tests/30_context_simple-memo.scss000066400000000000000000000000551302207441000233430ustar00rootroot00000000000000@import "memo"; @import "13_context_simple";breakpoint-2.7.1/tests/tests/31_context_complex-memo.scss000066400000000000000000000000561302207441000235230ustar00rootroot00000000000000@import "memo"; @import "14_context_complex";breakpoint-2.7.1/tests/tests/32_no_query_fallback-memo.scss000066400000000000000000000000601302207441000237640ustar00rootroot00000000000000@import "memo"; @import "15_no_query_fallback";breakpoint-2.7.1/tests/tests/33_media-memo.scss000066400000000000000000000000441302207441000213660ustar00rootroot00000000000000@import "memo"; @import "16_media";breakpoint-2.7.1/tests/tests/34_breakpoint_function-memo.scss000066400000000000000000000000621302207441000243530ustar00rootroot00000000000000@import "memo"; @import "17_breakpoint_function";breakpoint-2.7.1/tests/tests/35_memoization.scss000066400000000000000000000023631302207441000217170ustar00rootroot00000000000000$Memoization-Table: (); @import "memo"; @import "variables"; $loops: 100; @include breakpoint-set('no queries', true); @include breakpoint-set('no query fallbacks', true); @mixin memoize-loop($var) { _memoization: "#{inspect($Memoization-Table)}"; @for $i from 1 through $loops { @include breakpoint($var) { _test: "breakpoint(#{$var})"; // _memoization: "#{inspect($Memoization-Table)}" } } } /** * Memoized Output * - Compile time should be reduced for like calls **/ .memoize--simple-feature { @include memoize-loop($single-pixel-value); } .memoize--complex-feature { @include memoize-loop($multidimensional-plus-one-sided); } .memoize--shared-feature { @include memoize-loop($feature-first); } .memoize--or-query { @include memoize-loop($dynamic-context); } .memoize--with-fallback { @include memoize-loop($no-query); } .memoize--breakpoint-function-context { _memoization: "#{inspect($Memoization-Table)}"; @for $i from 1 through $loops { _test: "breakpoint(#{$legacy})"; // _memoization: "#{inspect($Memoization-Table)}" $bkpt: breakpoint($legacy, 'min-width', 'media', 'no-query'); $contexts: map-get($bkpt, 'context'); @each $k, $v in $contexts { _#{$k}: inspect($v); } } }breakpoint-2.7.1/tests/tests/_variables.scss000066400000000000000000000031011302207441000211530ustar00rootroot00000000000000@import 'breakpoint'; $single-pixel-value: 500px; $single-em-value: 30em; @include breakpoint-set('to ems', false); @include add-breakpoint('single pixel value', $single-pixel-value); @include add-breakpoint('single pixel value, em', $single-em-value); $feature-first: height 500px; $value-first: 500px height; $arbitrary-feature: lion 500px; $feature-value-both-strings: portrait orientation; $min-max-default-feature: 500px 700px; $feature-min-max: height 300px 700px; $min-max-feature: 300px 700px height; $arbitrary-feature-min-max: lion 300px 700px; $multidimensional: ($feature-first) ($feature-value-both-strings); $basic-or: max-width 350px, 500px 600px; $basic-or-media: 500px, tv 700px color; @include add-breakpoint('basic or', $basic-or); $monochrome: monochrome; $monochrome-double: 300px monochrome; $multidimensional-plus-one-sided: ($feature-first) ($feature-value-both-strings) ($monochrome); $not: 'not screen'; $not-plus-default: 'not tv' 500px; $aspect-ratio: 'min-aspect-ratio' '300/250'; $device-aspect-ratio: 'max-device-aspect-ratio' '320/480'; $no-query: 700px, 'no-query' '.no-mq'; $legacy: 'not screen', 500px, 'no-query' '.no-mq'; $device-pixel-ratio: 'resolution' 2dppx; $resolution: 'min-resolution' 192dpi; @include add-breakpoint('device pixel ratio', $device-pixel-ratio); $dynamic-context: 400px ('min-height' 200px), (300px 325px) (orientation portriat) monochrome; $simple-media: tv; $media-plus-default: tv 500px; $media-plus-fence: tv 500px 700px; $media-only: 'only print'; $media-not: 'not print'; $media-not-plus-fenced: 'not print' 500px 700px;