Merge pull request #1131 from mjschock/STRF-4031

STRF-4031 - Fixes mobile swatch selectability styling.

Author: mjschock

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Fixes functionality of carousel links in IE and Edge. [#1093](https://github.com/bigcommerce/cornerstone/pull/1093)
 - Add image width & height for carousel images. [#1126](https://github.com/bigcommerce/cornerstone/pull/1126)
 - Fix Bold featured products clickability. [#1130](https://github.com/bigcommerce/cornerstone/pull/1130)
+- Fixes mobile swatch selectability styling. [#1131](https://github.com/bigcommerce/cornerstone/pull/1131)
 
 ## 1.10.0 (2017-11-15)
 - Fix spaces in faceted search option names [#1113](https://github.com/bigcommerce/cornerstone/pull/1113)

assets/scss/components/citadel/forms/_forms.scss

@@ -260,6 +260,7 @@
 // 1. Issue with FastClick JS library workaround: https://github.com/ftlabs/fastclick/issues/351
 // 2. Resetting font due to inline-block whitespace issue.
 // 3. Added for STENCIL-3384. Did not change directly on .form-option-variant to avoid 1.
+// 4. Added for STRF-4031. Breaks 3 for small screens.
 //
 
 .form-option {
@@ -297,7 +298,10 @@
     @include square(22);
     min-width: initial;
     padding: 0;
-    pointer-events: inherit;  // 3
+
+    @include breakpoint('small') { // 4
+        pointer-events: inherit; // 3
+    }
 }
 
 .form-option-variant--pattern {