Initial commit.

Author: AMJones

.gitignore

@@ -1,6 +1,3 @@
 composer.phar
 /vendor/
-
-# Commit your application's lock file http://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file
-# You may choose to ignore a library lock file http://getcomposer.org/doc/02-libraries.md#lock-file
-# composer.lock
+!/composer.lock

composer.json

@@ -0,0 +1,27 @@
+{
+  "name": "strapless/buttons",
+  "description": "Drop in replacement for Bootstrap buttons, with Material Design effects. Designed for the StrapLess Framework, but usable as a standalone component.",
+  "keywords": [
+    "buttons",
+    "sass",
+    "scss",
+    "strapless",
+    "bootstrap",
+    "material",
+    "ripple",
+    "css"
+  ],
+  "homepage": "https://www.github.com/strapless/buttons",
+  "version": "1.0",
+  "authors": [
+    {
+      "name": "Aaron M Jones",
+      "homepage": "http://www.jonesiscoding.com"
+    }
+  ],
+  "license": "MIT",
+  "require": {
+    "strapless/base": "^1.1",
+    "strapless/colors": "^1.0"
+  }
+}

composer.lock

@@ -0,0 +1,12 @@
+
+$font-size-base:    1rem !default;
+$font-size-lg:      ($font-size-base * 1.25) !default;
+$font-size-sm:      ($font-size-base * .875) !default;
+$font-weight-bold:  700  !default;
+
+$line-height-base:  1.5 !default;
+$line-height-sm:    1.5 !default;
+$line-height-lg:    1.5 !default;
+
+
+$border-radius-sm:  2px !default;

scss/_bs4-shim.scss

@@ -0,0 +1,76 @@
+@import "buttons-variables";
+
+// Outline Button Mixin
+@mixin btn-outline-variant($color, $active-color: darken($color, 7.5%)) {
+  &.btn-outline {
+    color: $color !important;
+    .active &, &:active, &.active, &:hover, &:focus {
+      border-color:     $active-color !important;
+      color:            $active-color !important;
+      background-color: rgba(0, 0, 0, .05) !important;
+    }
+  }
+}
+
+// Material Design Flat Button Mixin
+@mixin btn-flat-variant($color, $active-color: darken($color, 7.5%)) {
+  &.btn-flat {
+    color: $color !important;
+    .active &, &:active, &.active, &:hover, &:focus {
+      @if $btn-border-width > 0 {
+        border-color:     transparent !important;
+      }
+      color:            $active-color !important;
+      background-color: rgba(0, 0, 0, .03) !important;
+    }
+  }
+}
+
+// Master Button Variant Mixin (Calls Flat & Outline Button Mixins)
+@mixin btn-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
+  @if $background != transparent {
+    background-color: $background;
+  }
+  @if $btn-border-width > 0 {
+    border-color:     $border;
+  }
+  @if isLight($background) {
+    color: color("black");
+  } @else {
+    // Only using here due to dark bg/light font.
+    //-webkit-font-smoothing: antialiased;
+    color: color("white");
+  }
+  // Disabled comes first so active can properly restyle
+  .disabled &, &:disabled {
+    opacity:          .5;
+  }
+  .active &, &:active, &.active, &:hover, &:focus {
+    background-color: $active-background;
+    border-color:     $active-border;
+    text-decoration:  none;
+    @if isLight($background) {
+      color: $black;
+    } @else {
+      color: $white;
+    }
+  }
+  @include btn-outline-variant($background, $active-background);
+  @include btn-flat-variant($background, $active-background);
+}
+
+// Button sizes
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
+}
+
+@mixin btn-variants() {
+  @each $color, $value in $theme-colors {
+    .btn-#{$color} {
+      @include btn-variant($value, $value);
+    }
+  }
+}

scss/_buttons-mixins.scss

@@ -0,0 +1,32 @@
+@import "strapless/colors/scss/colors";
+@import "strapless/base/scss/base";
+@import "bs4-shim";
+
+$btn-padding-x:         (space-x(md) * 1rem)  !default;
+$btn-padding-y:         (space-y(md) * 1rem)  !default;
+$btn-line-height:       $line-height-base !default;
+$btn-height:            ($font-size-base * $btn-line-height) + ($btn-padding-y * 2) !default;
+
+$btn-xs-padding-x:      (space-x(xs) * 1rem)  !default;
+$btn-xs-padding-y:      (space-y(xs) * 1rem)  !default;
+$btn-xs-height:         (($btn-xs-padding-y * 2) + $line-height-sm) !default;
+
+$btn-sm-padding-x:      (space-x(sm) * 1rem)  !default;
+$btn-sm-padding-y:      (space-y(sm) * 1rem) !default;
+$btn-sm-height:         (($btn-sm-padding-y * 2) + $line-height-sm) !default;
+
+$btn-lg-padding-x:      (space-x(lg) * 1rem)  !default;
+$btn-lg-padding-y:      (space-y(lg) * 1rem)  !default;
+$btn-lg-height:         (($btn-lg-padding-y * 2) + $line-height-lg) !default;
+
+$btn-border-width:      0 !default;
+$btn-font-weight:       if(variable-exists(font-weight-medium), $font-weight-medium, $font-weight-bold) !default;
+
+$btn-default-color:     gray(600);
+$btn-default-bg:        color(white);
+$btn-border-radius:     $border-radius-sm;
+
+$btn-transition:        background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$btn-raised-transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+
+$btn-cursor:            pointer !default;