Merge branch 'develop'

Author: Dan503

README.md

@@ -977,7 +977,7 @@ The use case in this example is that you always want the print styles to be base
 
 ### The `not` media type
 
-`'not'` is an interesting media type. It was introduced in v2.1.0 as a short-hand for `not screen` in mq-scss (`@media not (max-width: 600px){}` is actually invalid css).
+`'not'` is an interesting media type. It was introduced in v2.1.0 as a short-hand for `not screen` (then updated in v2.1.3 to output `not all`).
 
 `'not'` will essentially invert the media query. You could use this for helping you write counter queries however I would caution against this. In general, using `'not'` is fine. However, if you try and nest another media query inside of it, or you nest the `'not'` statement inside a different media query, Sass can output some very odd and unexpected results. This is the reason version 1.0.0 of mq-scss couldn't support nested `outside` statements. It was essentially using `not inside` to produce the media query.
 
@@ -1002,7 +1002,7 @@ In order to use a `min-ratio` that works in the same sort of way that `min-heigh
 
 ````css
 /* output css for both */
-@media not screen and (max-aspect-ratio: 2 / 1) {
+@media not all and (max-aspect-ratio: 2 / 1) {
     body { color: #000; }
 }
 ````
@@ -1147,6 +1147,10 @@ It also comes with a batch of 46 unit tests that are used to ensure that all of
 
 This change log only covers major changes to the mixin. Due to how npm works, things like edits to the readme file require releasing whole new versions of the module to publish the edits. Those sorts of releases are not listed here.
 
+### v2.1.3
+
+- `'not'` is now short hand for `not all` instead of `not screen`. This is more what I was trying to go with originally but I wasn't sure what the proper syntax was.
+
 ### v2.1.2
 
 - Added automated unit-tests.

_mq.scss

@@ -8,7 +8,7 @@ $mq-debug: false !default;
 
 @function mediaType($mediaType: false, $hasAnd: true){
 	$media: '';
-	$mediaType: if($mediaType == 'not', 'not screen', $mediaType);
+	$mediaType: if($mediaType == 'not', 'not all', $mediaType);
 	@if ($mediaType){
 		$media: if($hasAnd, $mediaType + ' and ', $mediaType);
 	}

docs/assets/scripts/main.js

@@ -11,6 +11,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link href="favicon.ico" rel="shortcut icon">
   <link rel="stylesheet" href="assets/styles/main.css">
+  <link rel="stylesheet" href="assets/styles/test-styles.css">
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -27,7 +28,7 @@
     <div class="pageContainer__width">
       <header class="header">
         <h1>mq-scss testing/demo environment</h1>
-        <p class="version">v2.1.0</p>
+        <p class="version">v2.1.3</p>
         <pre class="no-lines"><code style="text-align: center">npm install mq-scss --save</code></pre>
       </header>
       <div class="bodyContent"><p>This is a testing/demo site for mq-scss. Full documentation can be found on <a href="https://github.com/Dan503/mq-scss">GitHub</a> and <a href="https://www.npmjs.com/package/mq-scss">npm</a>.</p>

docs/assets/scripts/main.js.map

@@ -49,7 +49,6 @@ gulp.task('compile', gulp.series(
     'imagemin',
     'sass',
     'compile-tests',
-    'modernizr',
     'browserify',
   )
 ));

docs/assets/styles/main.css

@@ -1,6 +1,6 @@
 {
   "name": "mq-scss",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "An extremely powerful but easy to use Sass media query mixin that allows you to create almost any media query you can imagine.",
   "main": "_mq.scss",
   "repository": {
@@ -54,7 +54,6 @@
     "gulp-imagemin": "^4.0.0",
     "gulp-jade": "^1.1.0",
     "gulp-load-plugins": "^1.5.0",
-    "gulp-modernizr": "0.0.0",
     "gulp-newer": "^1.3.0",
     "gulp-notify": "^3.0.0",
     "gulp-plumber": "^1.1.0",

docs/assets/styles/main.css.map

@@ -11,8 +11,4 @@
 			display: none;
 		}
 	}
-
-	.no-flexbox & {
-		width: 780px;
-	}
 }

docs/assets/styles/test-styles.css

@@ -9,6 +9,8 @@ import codeLineNumbers from '~on-page-load-js/codeLineNumbers';
 import smoothAnchors from '~on-page-load-js/smoothAnchors';
 
 $(() => {
+  $('html').removeClass('no-js').addClass('js');
   codeLineNumbers();
   smoothAnchors();
+  $('html').addClass('-jsLoaded');
 });

docs/assets/styles/test-styles.css.map

@@ -124,10 +124,6 @@ a {
     cursor: default;
     pointer-events: none;
     opacity: 0.2;
-
-    .no-csspointerevents & {
-      display: none;
-    }
   }
 }
 
@@ -199,10 +195,6 @@ pre {
     padding: 10px 5px;
     font-size: 1em;
   }
-
-  .no-flexbox & {
-    max-width: 780px;
-  }
 }
 
 code {

docs/index.html

@@ -1 +1 @@
-@media not screen and (min-width: 801px){.unitTest{color:#000}}
+@media not all and (min-width: 801px){.unitTest{color:#000}}

gulp/tasks/modernizr.js

@@ -1,3 +1,3 @@
 import unitTest from '../../../gulp/helpers/unitTest';
 
-unitTest('notMedia', __dirname, '@media not screen and (min-width: 801px){.unitTest{color:#000}}')
+unitTest('notMedia', __dirname, '@media not all and (min-width: 801px){.unitTest{color:#000}}')

gulpfile.babel.js

@@ -1 +1 @@
-@media not screen and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}
+@media not all and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}

package.json

@@ -1,3 +1,3 @@
 import unitTest from '../../../gulp/helpers/unitTest';
 
-unitTest('exactRatioWorkAround1', __dirname, '@media not screen and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}')
+unitTest('exactRatioWorkAround1', __dirname, '@media not all and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}')

src/_modules/tabs/tabs.scss

@@ -1 +1 @@
-@media not screen and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}
+@media not all and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}

src/_scripts/main.js

@@ -1,3 +1,3 @@
 import unitTest from '../../../gulp/helpers/unitTest';
 
-unitTest('exactRatioWorkAround2', __dirname, '@media not screen and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}')
+unitTest('exactRatioWorkAround2', __dirname, '@media not all and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}')

src/_styles/04-base-styles/elements.scss

@@ -1 +1 @@
-@media not screen and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}
+@media not all and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}

unit-tests/media/notMedia/notMedia.css

@@ -1,3 +1,3 @@
 import unitTest from '../../../gulp/helpers/unitTest';
 
-unitTest('exactRatioWorkAround3', __dirname, '@media not screen and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}')
+unitTest('exactRatioWorkAround3', __dirname, '@media not all and (max-aspect-ratio: 2 / 1){.unitTest{color:#000}}')