minable 0.0.2 → 0.1.1

data/app/assets/stylesheets/{helpers → minable/helpers}/classes/_display-classes.scss

@@ -1,7 +1,7 @@
 // Contains any classes used to hide or show elements, these will only be output when used
 
 // Hide text from visually-able users but keep it available for screen readers.
-.screen-reader-text {
+%screen-reader-text {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   clip: rect(1px 1px 1px 1px); // IE6, IE7 (deprecated syntax)
@@ -13,21 +13,19 @@
 }
 
 // Hide elements from visual users but not from screen readers
-%visually-hidden
-{
-    position: absolute !important;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 (deprecated syntax) */
-    clip: rect(1px, 1px, 1px, 1px);
-    padding:0 !important;
-    border:0 !important;
-    height: 1px !important;
-    width: 1px !important;
-    overflow: hidden;
+%visually-hidden {
+  position: absolute !important;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 (deprecated syntax) */
+  clip: rect(1px, 1px, 1px, 1px);
+  padding:0 !important;
+  border:0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden;
 }
 
 // Hide elements from 'all the people'
-%fully-hidden
-{
-    display: none;
-    visibility: hidden;
+%fully-hidden {
+  display: none;
+  visibility: hidden;
 }

data/app/assets/stylesheets/{helpers → minable/helpers}/mixins/_all.scss

@@ -1,4 +1,5 @@
 // More usefull mixins! Create reusable mixins where possible!
 
 @import "rem-fallback";
-@import "replace-text";
+@import "replace-text";
+@import "opacity";

data/app/assets/stylesheets/minable/helpers/mixins/_opacity.scss

@@ -0,0 +1,6 @@
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  $opacity-ie: $opacity * 100;
+  filter: alpha(opacity=$opacity-ie); //IE8
+}
+// Usage: @include opacity(0.8);

data/app/assets/stylesheets/{helpers → minable/helpers}/mixins/_rem-fallback.scss

@@ -1,5 +1,4 @@
 // My modified version of Karl Merkli's rem mixin from http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/.
-
 // Pass in a property name and the target pixel values and the mixin will spit out the pixel fallback version and the rem version.
 
 @mixin rem-fallback($property, $values...) {

data/app/assets/stylesheets/minable-ui/_all.scss

@@ -0,0 +1,3 @@
+@import "buttons/all";
+@import "forms/all";
+@import "tables/all";

data/app/assets/stylesheets/minable-ui/buttons/_all.scss

@@ -0,0 +1,3 @@
+@import "button-settings";
+@import "button-core";
+@import "button-colors";

data/app/assets/stylesheets/minable-ui/buttons/_button-colors.scss

@@ -0,0 +1,49 @@
+.min-button {
+  &.dark-text {
+    color: $min-b-text-colour-dark;
+  }
+
+  &.success {
+    background-color: $min-b-bg-colour-success;
+
+    &:hover {
+      background-color: $min-b-bg-colour-success-hover;
+    }
+  }
+
+  &.warning {
+    background-color: $min-b-bg-colour-warning;
+
+    &:hover {
+      background-color: $min-b-bg-colour-warning-hover;
+    }
+  }
+
+  &.error {
+    background-color: $min-b-bg-colour-error;
+
+    &:hover {
+      background-color: $min-b-bg-colour-error-hover;
+    }
+  }
+
+  &.info {
+    background-color: $min-b-bg-colour-info;
+
+    &:hover {
+      background-color: $min-b-bg-colour-info-hover;
+    }
+  }
+
+  &.hollow {
+    background-color: $min-b-bg-colour-hollow;
+    border: $min-b-hollow-border;
+    color: $min-b-hollow-text-color;
+
+    &:hover {
+      background-color: $min-b-bg-colour-hollow-hover;
+      border: $min-b-hollow-border-hover;
+      color: $min-b-hollow-text-color-hover;
+    }
+  }
+}

data/app/assets/stylesheets/minable-ui/buttons/_button-core.scss

@@ -0,0 +1,32 @@
+.min-button {
+  background-color: $min-b-bg-colour-primary;
+  border: 0;
+  border-radius: $min-b-default-radius;
+  box-shadow: $min-b-default-box-shadow;
+  color: $min-b-text-colour-primary;
+  font-size: 1em;
+  outline: none;
+  padding: $min-b-default-padding;
+  text-align: center;
+  transition: $min-b-default-transition;
+
+  &:hover {
+    background-color: darken($min-b-bg-colour-primary, 10%);
+  }
+
+  &.small {
+    font-size: .875em;
+  }
+
+  &.large {
+    font-size: 1.125em;
+  }
+
+  &.xlarge {
+    font-size: 1.5em;
+  }
+
+  &.rounded {
+    border-radius: $min-b-rounded-radius;
+  }
+}

data/app/assets/stylesheets/minable-ui/buttons/_button-settings.scss

@@ -0,0 +1,33 @@
+// colours
+
+$min-b-bg-colour-primary: #4BB5C1 !default;
+$min-b-text-colour-primary: #FFF !default;
+
+$min-b-text-colour-dark: #111 !default;
+
+$min-b-bg-colour-hollow: transparent !default;
+$min-b-bg-colour-hollow-hover: #FFF !default;
+$min-b-bg-colour-success: #A7DF6F !default;
+$min-b-bg-colour-success-hover: darken(#A7DF6F, 10%) !default;
+$min-b-bg-colour-warning: #FBC147 !default;
+$min-b-bg-colour-warning-hover: darken(#FBC147, 10%) !default;
+$min-b-bg-colour-error: #DB634F !default;
+$min-b-bg-colour-error-hover: darken(#DB634F, 10%) !default;
+$min-b-bg-colour-info: #D8D8D8 !default;
+$min-b-bg-colour-info-hover: darken(#D8D8D8, 10%) !default;
+
+
+$min-b-default-border: none !default;
+$min-b-default-box-shadow: none;
+$min-b-default-padding: .75em 1.25em !default;
+$min-b-default-radius: .25em !default;
+$min-b-default-transition: .3s !default;
+
+$min-b-rounded-radius: 2em !default;
+
+$min-b-hollow-border: 1px solid $min-b-bg-colour-primary !default;
+$min-b-hollow-border-hover: 1px solid #FFF !default;
+$min-b-hollow-text-color: $min-b-bg-colour-primary !default;
+$min-b-hollow-text-color-hover: $min-b-bg-colour-primary !default;
+
+$min-f-default-padding: .75em 1.25em !default;

data/app/assets/stylesheets/minable-ui/forms/_all.scss

@@ -0,0 +1,5 @@
+@import "form-settings";
+@import "form-core";
+@import "form-stacked";
+@import "form-responsive";
+@import "form-grouped";

data/app/assets/stylesheets/minable-ui/forms/_form-core.scss

@@ -0,0 +1,63 @@
+.min-form {
+  border: none;
+  border-radius: $min-f-default-wrapper-border-radius;
+
+  fieldset {
+    border: $min-f-fieldset-border;
+    border-radius: $min-f-default-wrapper-border-radius;
+    margin-bottom: .5em;
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="date"],
+  input[type="month"],
+  input[type="time"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="week"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="color"],
+  select,
+  textarea {
+    border: $min-f-default-border;
+    border-radius: $min-f-default-radius;
+    box-shadow: $min-f-default-box-shadow;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    color: $min-f-text-colour;
+    display: inline-block;
+    margin: .5em .5em .5em 0;
+    outline: none;
+    padding: $min-f-default-input-padding;
+
+    &:active,
+    &:focus {
+      border: $min-f-default-border-active;
+    }
+  }
+
+  label {
+    color: $min-f-label-colour;
+    display: inline-block;
+    margin-right: .5em;
+
+    input[type="checkbox"] {
+      margin-right: .5em;
+    }
+  }
+
+  .min-group-block {
+    display: block;
+    margin: .5em 0;
+
+    label {
+      padding-left: .5em;
+    }
+  }
+}

data/app/assets/stylesheets/minable-ui/forms/_form-grouped.scss

@@ -0,0 +1,148 @@
+.min-form.grouped-stacked {
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="date"],
+  input[type="month"],
+  input[type="time"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="week"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="color"],
+  select,
+  textarea {
+    border-collapse: collapse;
+    border-radius: 0;
+    border-top: 0;
+    box-shadow: none;
+    display: block;
+    margin: 0;
+    width: 100%;
+
+    &:active,
+    &:focus {
+      border: $min-f-default-border-active;
+      margin-top: -1px;
+    }
+
+    &:first-child {
+      border-radius: $min-f-default-radius $min-f-default-radius 0 0;
+      border-top: $min-f-default-border;
+      margin-top: .5em;
+
+      &:active,
+      &:focus {
+        border: $min-f-default-border-active;
+      }
+    }
+
+    &:last-of-type {
+      border-radius: 0 0 $min-f-default-radius $min-f-default-radius;
+      margin-bottom: .5em;
+    }
+  }
+}
+
+.min-form.grouped-inline {
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="date"],
+  input[type="month"],
+  input[type="time"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="week"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="color"],
+  select,
+  textarea {
+    border-collapse: collapse;
+    border-radius: 0;
+    border-left: 0;
+    display: inline-block;
+    *display: inline;
+    margin: .5em 0;
+
+    &:active,
+    &:focus {
+      border: $min-f-default-border-active;
+      margin-left: -1px;
+    }
+
+    &:first-child {
+      border-radius: $min-f-default-radius 0 0 $min-f-default-radius;
+      border-left: $min-f-default-border;
+
+      &:active,
+      &:focus {
+        border: $min-f-default-border-active;
+        margin-left: 0;
+      }
+    }
+
+    &:last-of-type {
+      border-radius: 0 $min-f-default-radius $min-f-default-radius 0;
+    }
+  }
+
+  @if $min-f-breakpoint-enable == true {
+    $min-f-break-value: strip-unit($min-f-breakpoint-width) / strip-unit($min-browser-default-font-size);
+
+    @media(max-width: #{$min-f-break-value}em) {
+      input[type="text"],
+      input[type="password"],
+      input[type="email"],
+      input[type="url"],
+      input[type="date"],
+      input[type="month"],
+      input[type="time"],
+      input[type="datetime"],
+      input[type="datetime-local"],
+      input[type="week"],
+      input[type="number"],
+      input[type="search"],
+      input[type="tel"],
+      input[type="color"],
+      select,
+      textarea {
+        border-left: $min-f-default-border;
+        border-top: 0;
+        box-shadow: none;
+        display: block;
+        margin: 0;
+        width: 100%;
+
+        &:active,
+        &:focus {
+          border: $min-f-default-border-active;
+          margin-top: -1px;
+          margin-left: 0;
+        }
+
+        &:first-child {
+          border-radius: $min-f-default-radius $min-f-default-radius 0 0;
+          border-top: $min-f-default-border;
+          margin-top: .5em;
+
+          &:active,
+          &:focus {
+            border: $min-f-default-border-active;
+          }
+        }
+
+        &:last-of-type {
+          border-radius: 0 0 $min-f-default-radius $min-f-default-radius;
+          margin-bottom: .5em;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/minable-ui/forms/_form-responsive.scss

@@ -0,0 +1,59 @@
+.min-form {
+  .min-input-1 {
+    width: 100%;
+  }
+
+  .min-input-1-2 {
+    width: 50%;
+    *width: 49.969%;
+  }
+
+  .min-input-1-3 {
+    width: 33.3333%;
+    *width: 33.3023%;
+  }
+
+  .min-input-2-3 {
+    width: 66.6667%;
+    *width: 66.6357%;
+  }
+
+  .min-input-1-4 {
+    width: 25%;
+    *width: 24.969%;
+  }
+
+  .min-input-3-4 {
+    width: 75%;
+    *width: 74.969%;
+  }
+}
+
+@if $min-f-breakpoint-enable == true {
+  $min-f-break-value: strip-unit($min-f-breakpoint-width) / strip-unit($min-browser-default-font-size);
+
+  @media(max-width: #{$min-f-break-value}em) {
+    .min-form {
+      input[type="text"],
+      input[type="password"],
+      input[type="email"],
+      input[type="url"],
+      input[type="date"],
+      input[type="month"],
+      input[type="time"],
+      input[type="datetime"],
+      input[type="datetime-local"],
+      input[type="week"],
+      input[type="number"],
+      input[type="search"],
+      input[type="tel"],
+      input[type="color"],
+      select,
+      textarea,
+      label {
+        margin: .5em 0;
+        width: 100%;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/minable-ui/forms/_form-settings.scss

@@ -0,0 +1,22 @@
+// colours
+
+$min-f-bg-colour: #FFF !default;
+$min-f-text-colour: #111 !default;
+$min-f-label-colour: #555 !default;
+
+$min-f-text-colour-dark: #111 !default;
+
+$min-f-breakpoint-enable: true !default;
+$min-f-breakpoint-width: 800px !default;
+
+$min-f-default-wrapper-border-radius: .5em !default;
+
+$min-f-default-border: 1px solid #CCC !default;
+$min-f-default-box-shadow: inset 1px 1px 3px rgba(#999, 0.3) !default;
+$min-f-default-input-padding: .75em 1.25em !default;
+$min-f-default-radius: .5em !default;
+
+$min-f-default-border-active: 1px solid #4BB5C1 !default;
+
+
+$min-f-fieldset-border: 1px solid #D8D8D8 !default;

data/app/assets/stylesheets/minable-ui/forms/_form-stacked.scss

@@ -0,0 +1,28 @@
+.min-form.stacked {
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="date"],
+  input[type="month"],
+  input[type="time"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="week"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="color"],
+  select,
+  textarea {
+    display: block;
+    margin: .5em 0;
+    width: 100%;
+  }
+
+  label {
+    display: block;
+    margin: .5em 0;
+    padding-left: .5em;
+  }
+}

data/app/assets/stylesheets/minable-ui/tables/_all.scss

@@ -0,0 +1,2 @@
+@import "tables-settings";
+@import "tables-core";

data/app/assets/stylesheets/minable-ui/tables/_tables-core.scss

@@ -0,0 +1,16 @@
+.min-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: $min-t-border-default-outer;
+  empty-cells: show;
+  text-align: $min-t-text-align;
+
+  thead {
+    background-color: $min-t-bg-default-head;
+    border-bottom: $min-t-border-default-head;
+  }
+
+  tbody {
+    background-color: $min-t-bg-default-body;
+  }
+}

data/app/assets/stylesheets/minable-ui/tables/_tables-settings.scss

@@ -0,0 +1,9 @@
+$min-t-border-default-outer: 1px solid #D8D8D8 !default;
+$min-t-border-default-head: 2px solid #D8D8D8 !default;
+
+$min-t-bg-default: #D8D8D8 !default;
+$min-t-bg-default-head: #D8D8D8 !default;
+$min-t-bg-default-body: #FFF !default;
+
+
+$min-t-text-align: left !default;

data/features/step_definitions/minable_steps.rb

@@ -6,13 +6,13 @@ Given /^I install minable to "([^"]*)"$/ do |path|
 end
 
 Then /^the sass directories(?: with "([^"]+)" prefix)? should have been generated$/ do |prefix|
-  sass_directories = ["components", "framework", "helpers", "modules", "templates"]
+  sass_directories = ['minable', 'minable-ui']
   sass_directories.map!{ |directory| minable_path(prefix, directory) }
   check_directory_presence(sass_directories, true)
 end
 
 Then /^the master minable partial should have been generated(?: within "([^"]+)" directory)?$/ do |prefix|
-  check_file_presence([minable_path(prefix, '_minable.scss')], true)
+  check_file_presence([minable_path(prefix, '_all.scss')], true)
 end
 
 Then /^minable should not have been generated$/ do

data/features/support/env.rb

@@ -1 +1,4 @@
-require "aruba/cucumber"
+require 'aruba/cucumber'
+require "bundler"
+
+Bundler.require :default

data/features/support/minable_support.rb

@@ -3,15 +3,15 @@ module MinableSupport
     if path
       run_simple("bundle exec minable install --path '#{path}'")
     else
-      run_simple("bundle exec minable install")
+      run_simple('bundle exec minable install')
     end
   end
 
   def minable_path(prefix, path)
     if prefix
-      File.join(prefix, 'minable', path)
+      File.join(prefix, path)
     else
-      File.join('minable', path)
+      path
     end
   end
 end