vendor/assets/stylesheets/alom/_responsive.scss in alom-0.1.1 vs vendor/assets/stylesheets/alom/_responsive.scss in alom-1.0.0

@@ -7,10 +7,12 @@
     m: $medium, // Tablet Screens
     l: $large, // Normal Screens
     w: $wide // Wide Screens
 );
 
+$min-width: min-width;
+
 //############################################//
 //# Customize Alom editing the variables  ###//
 //###########################################//
 // Example: @include breakpoint(s);
 @mixin breakpoint($bp) {
@@ -34,19 +36,28 @@
 //############################################//
 //### Hide elements in only this devices  ###//
 //###########################################//
 @each $bp in map-keys($breakpoints) {
   .hide-on-#{$bp}-only {
-    @media screen and  (min-width: prev($breakpoints, #{$bp})) and (max-width: next($breakpoints, #{$bp})) {
+    @media screen and (min-width: prev($breakpoints, #{$bp})) and (max-width: next($breakpoints, #{$bp})) {
       display: none !important;
     }
   }
 }
+
 @each $bp in map-keys($breakpoints) {
   .show-on-#{$bp} {
-    visibility: hidden;
+    display: none;
 
-    @media screen and  (min-width: prev($breakpoints, #{$bp})) and (max-width: next($breakpoints, #{$bp})) {
-      visibility: visible;
+    @if ($min-width != null) {
+      @media screen and (max-width: $small) {
+        display: block;
+      }
+    }
+
+    @else {
+      @media screen and ($min-width: prev($breakpoints, #{$bp})) and (max-width: next($breakpoints, #{$bp})) {
+        display: block;
+      }
     }
   }
 }