Skip to content

Commit

Permalink
Improves touch-only mixin.
Browse files Browse the repository at this point in the history
  • Loading branch information
jonesiscoding committed Jun 20, 2018
1 parent ef72067 commit ec64ef3
Show file tree
Hide file tree
Showing 4 changed files with 182 additions and 7 deletions.
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"rwd"
],
"homepage": "https://www.github.com/deviscoding/responsive",
"version": "1.0.4",
"version": "1.0.5",
"authors": [
{
"name": "Aaron M Jones",
Expand Down
109 changes: 109 additions & 0 deletions composer.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

72 changes: 67 additions & 5 deletions scss/_rwd-mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,49 @@
}
}

// Wraps the given content in a media query targeting
// devices without a 'fine' pointing device. On Firefox
// browsers, this may include all touch devices.
@mixin only-touch() {
@media #{media-condition("touch")} {
// Encloses the content in a media query intended for devices reporting 'pointer:coarse'.
// Works with poly-pointer polyfill.
//
// Any additional media queries given will be appended to each of the necessary queries.
//
// @param {List|String} $and - Additional media queries to add.
@mixin only-touch($and: null) {

$joiner: unquote(" and ");
$suffix: "";

@if $and != null {
@if type-of($and) == "list" {
@each $item in $and {
// Get Surrounded by Parenthesis if Needed
$tItem: parenthesis($item, true);
// Add The ' and '
$suffix: #{$suffix}#{$joiner}#{$tItem};
}
} @else {
$suffix: #{$joiner}#{parenthesis($and,true)};
}
}

// Get the Touch Conditions from Conditions Map
$touch-conditions: ();
@if(map-has-key($condition-map,"touch")) {
$touch-conditions: map-get($condition-map,"touch");
} @else {
@error "You must have a 'touch' key in your $conditions-map.";
}

// Put it all together, separated by ,'s. This could be done inline in the output, but that generates
// inspection errors in many SASS inspectors, so avoiding it here.
$query: "";
$sep: unquote(", ");
@each $part in $touch-conditions {
$tPart: unquote(quote($part));
$query: if(str-length($query) > 0, #{$query}#{$sep}#{$part}#{$suffix}, #{$part}#{$suffix});
}

// Output
@media #{$query} {
@content;
}
}
Expand Down Expand Up @@ -121,4 +159,28 @@
#{_target("ie 11")} {
@content;
}
}

@mixin only-android() {
#{_target("android")} {
@content;
}
}

@mixin only-ios() {
#{_target("ios")} {
@content;
}
}

@mixin only-mac() {
#{_target("mac")} {
@content;
}
}

@mixin only-windows() {
#{_target("windows")} {
@content;
}
}
6 changes: 5 additions & 1 deletion scss/_rwd-variables.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

$enable-framework: false;
$enable-framework: false !default;

// region //////////////////////////////////////////////// Breakpoints

Expand Down Expand Up @@ -36,13 +36,17 @@ $condition-map: (
$target-feature: (
"fallback" : '.fallback',
"baseline" : '.baseline',
"ios" : '.ios',
"android" : '.android'
);

// User-Agent Based Targets (requires d.js)
$target-user-agent: (
"ie" : "Trident",
"edge" : "Edge",
"safari" : "Version",
"windows" : "Windows NT",
"mac" : "Macintosh"
);

// endregion ///////////////////////////////////////////// End Targeting Maps

0 comments on commit ec64ef3

Please sign in to comment.