Fix breakpoint mixin

dist/css/kube.css

@@ -452,7 +452,7 @@ a.muted:hover {
 .nowrap td {
   white-space: nowrap; }
 
-@media (min-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1024px) {
   .columns-2,
   .columns-3,
   .columns-4 {

dist/scss/kube.scss

@@ -243,7 +243,7 @@ $overlay-background-color: rgba(#fff, .95);
         }
         @else if $min == md
         {
-            @media (min-width: $md) { @content; }
+            @media (min-width: $sm) and (max-width: $md) { @content; }
         }
         @else if $min == lg
         {

src/_js/Core/Kube.js

@@ -14,7 +14,16 @@ if (typeof jQuery === 'undefined') {throw new Error('Kube\'s requires jQuery')};
 ;(function()
 {
     // Inherits
-    Function.prototype.inherits = function(parent) { for (var key in parent.prototype) { this.prototype[key] = parent.prototype[key]; }};
+    Function.prototype.inherits = function(parent)
+    {
+        var F = function () {};
+        F.prototype = parent.prototype;
+        var f = new F();
+
+        for (var prop in this.prototype) f[prop] = this.prototype[prop];
+        this.prototype = f;
+        this.prototype.super = parent.prototype;
+    };
 
     // Core Class
     var Kube = function(element, options)

src/_scss/_variables.scss

@@ -45,20 +45,20 @@ $color-text: #313439 !default;
 $color-headings: #0d0d0e !default;
 
 // Links
-$color-link: #007eff !default;
-$color-link-hover: #ff3366 !default;
+$color-link: #3794de !default;
+$color-link-hover: #f03c69 !default;
 
 // Button
-$color-button-primary: #007eff !default;
+$color-button-primary: #1c86f2 !default;
 $color-button-primary-text: #fff !default;
 $color-button-secondary: #313439 !default;
 $color-button-secondary-text: #fff !default;
 
 // States
-$color-error: #ff3366 !default;
-$color-success: #2ec4b6 !default;
-$color-warning: #fdb833 !default;
-$color-focus: #007eff !default;
+$color-error: #f03c69 !default;
+$color-success: #35beb1 !default;
+$color-warning: #f7ba45 !default;
+$color-focus: #1c86f2 !default;
 
 // Extra
 $color-inverted: #fff !default;

src/_scss/components/_dropdown.scss

@@ -5,10 +5,10 @@
 	right: 0;
 	width: 280px;
 	color: #000;
-	font-size: 14px;
+	font-size: $font-size - 1px;
 	background: #fff;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
-    border-radius: 8px;
+    border-radius: 3px;
 	max-height: 300px;
 	margin: 0;
 	padding: 0;
@@ -43,7 +43,7 @@
     	}
     	& a {
     		display: block;
-    		padding: 8px 8px 7px 8px;
+    		padding: 12px;
     		text-decoration: none;
     		color: #000;
     		&:hover {

src/_scss/components/_forms.scss

@@ -101,6 +101,15 @@ textarea {
     line-height: $textarea-base-line;
     vertical-align: top;
 }
+input[type="file"] {
+    width: auto;
+    border: none;
+    padding: 0;
+    height: auto;
+    background: none;
+    box-shadow: none;
+    display: inline-block;
+}
 input[type="search"],
 input.search {
     background-repeat: no-repeat;

src/_scss/components/_grid.scss

@@ -48,6 +48,18 @@
 .last     { order: 1;  }
 
 @include breakpoint(sm) {
+    .row {
+
+        & .col {
+            margin-left: 0;
+            width: 100%;
+        }
+        &.gutters {
+            & .col {
+                margin-bottom: $text-margin-bottom;
+            }
+        }
+    }
 	.first-sm { order: -1; }
 	.last-sm  { order: 1;  }
 }

src/_scss/mixins/_breakpoints.scss

@@ -10,7 +10,7 @@
         }
         @else if $min == md
         {
-            @media (min-width: $md) { @content; }
+            @media (min-width: $sm) and (max-width: $md) { @content; }
         }
         @else if $min == lg
         {

src/_scss/mixins/_flex.scss

@@ -92,4 +92,8 @@
 // item width
 @mixin flex-item-width($width) {
 	flex: 0 0 $width;
+
+	@include breakpoint(sm) {
+        flex: 0 0 100% !important;
+    }
 }

src/_scss/mixins/_grid.scss

@@ -3,6 +3,11 @@
     @include flex;
     @include flex-items-row;
     @include flex-items-wrap;
+
+    @include breakpoint(sm) {
+        @include flex-items-column;
+        @include flex-items-nowrap;
+    }
 }
 
 // Generate Columns