Responsive mixin upgrade (#21)

* Upgraded search to use new responsive mixin * Updated Sky UX version and new mixin name * Updated Sky UX version * Sky UX version bump
blackbaud · Jun 4, 2019 · 48fb797 · 48fb797
1 parent 074c9d4
commit 48fb797
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.49.2",
+    "@blackbaud/skyux": "2.51.1",
     "@blackbaud/skyux-builder": "1.35.0",
     "@skyux-sdk/builder-plugin-skyux": "1.0.0"
   }

diff --git a/src/app/public/modules/search/search.component.scss b/src/app/public/modules/search/search.component.scss
@@ -63,16 +63,23 @@
 /**
  * Mobile styles
  */
+@include sky-host-responsive-container-xs-min() {
+  .sky-search-input-container {
+    min-width: auto;
+  }
+}
 
-@media (min-width: $sky-screen-sm-min) {
+@include sky-host-responsive-container-sm-min() {
   .sky-search-input-container {
-    min-width: $sky-search-width !important;
+    min-width: $sky-search-width;
   }
 }
 
 /**
  * On iOS, the input will zoom when focused,
  * setting the font-size prevents this.
+ *
+ * Not using the reactive mixins due to this being a bug based on actual screen size
  */
 @media (max-width: $sky-screen-xs-max) {
   .sky-search-input,