Merge pull request #31 from dabapps/hidden-class-names-fix

Hidden class names fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "roe",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/less/float.less

@@ -1,23 +1,28 @@
-.create-floats (@screen-size) {
-  .@{screen-size}-float-left {
-    float: left !important; // lesshint importantRule: false
+.float-styles (@float) {
+  float: @float !important; // lesshint importantRule: false
+}
+
+.create-float (@prefix, @name, @float, @alias) {
+  .@{prefix}-@{name} {
+    .float-styles(@float);
   }
 
-  .@{screen-size}-float-right {
-    float: right !important; // lesshint importantRule: false
+  .float-alias () when (@alias = true) {
+    .@{name} {
+      .float-styles(@float);
+    }
   }
-}
 
-.float-left,
-.xs-float-left {
-  float: left !important; // lesshint importantRule: false
+  .float-alias();
 }
 
-.float-right,
-.xs-float-right {
-  float: right !important; // lesshint importantRule: false
+.create-floats (@prefix, @alias: false) {
+  .create-float(@prefix, float-left, left, @alias);
+  .create-float(@prefix, float-right, right, @alias);
 }
 
+.create-floats(xs, true);
+
 @media all and (min-width: @screen-sm) {
   .create-floats(sm);
 }

src/less/hide.less

@@ -1,41 +1,42 @@
-.create-hidden (@name, @display) {
+.hidden-styles (@display) {
+  display: @display !important; // lesshint importantRule: false
+}
 
-  .@{name},
-  .xs-@{name} {
-    @media all and (max-width: (@screen-sm - 1px)) {
-      display: @display !important; // lesshint importantRule: false
-    }
+.create-hidden (@prefix, @name, @display, @alias) {
+  .@{prefix}-@{name} {
+    .hidden-styles(@display);
   }
 
-  .sm-@{name} {
-    @media all and (min-width: @screen-sm) and (max-width: (@screen-md - 1px)) {
-      display: @display !important; // lesshint importantRule: false
+  .hidden-alias () when (@alias = true) {
+    .@{name} {
+      .hidden-styles(@display);
     }
   }
 
-  .md-@{name} {
-    @media all and (min-width: @screen-md) and (max-width: (@screen-lg - 1px)) {
-      display: @display !important; // lesshint importantRule: false
-    }
-  }
+  .hidden-alias();
+}
 
-  .lg-@{name} {
-    @media all and (min-width: @screen-lg) and (max-width: (@screen-xl - 1px)) {
-      display: @display !important; // lesshint importantRule: false
-    }
-  }
+.create-hiddens (@prefix, @alias: false) {
+  .create-hidden(@prefix, display-none, none, @alias);
+  .create-hidden(@prefix, display-inline, inline, @alias);
+  .create-hidden(@prefix, display-block, block, @alias);
+  .create-hidden(@prefix, display-inline-block, inline-block, @alias);
+}
 
-  .xl-@{name} {
-    @media all and (min-width: @screen-xl) {
-      display: @display !important; // lesshint importantRule: false
-    }
-  }
+.create-hiddens(xs, true);
 
+@media all and (min-width: @screen-sm) {
+  .create-hiddens(sm);
 }
 
-.create-hidden(display-none, none);
-.create-hidden(display-block, block);
-.create-hidden(display-inline, inline);
-.create-hidden(display-inline-block, inline-block);
+@media all and (min-width: @screen-md) {
+  .create-hiddens(md);
+}
 
-// This comment fixes the linter complaining about a missing newline
+@media all and (min-width: @screen-lg) {
+  .create-hiddens(lg);
+}
+
+@media all and (min-width: @screen-xl) {
+  .create-hiddens(xl);
+}