sass-buttons 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ec6f6f2b001719fae2a83636aafe6e9c50a23ca3
-  data.tar.gz: dc0bd64d2461a2921f133a5bdfee541f1f630f64
+  metadata.gz: 10ce831b1c2a979f0b48b9637ccfe5833028a93c
+  data.tar.gz: 62dddd570d88260a8d2a334f73a5ee73bd9d8a5b
 SHA512:
-  metadata.gz: aee2ab35db46244bdbcd6d7dd3a06b01523d007c13f247191e764681dc51b6ebb1c9a43048e85f0db1df059180910a5e35fc3279710fb59a6b3390ecb36f198b
-  data.tar.gz: 0c41438786e6b4861405078e445427b47885330af108944cf93d3830e012cc9f35c1863629b9c5326146a8f549967229d7f805e9c217da711a3e018244cb6c8a
+  metadata.gz: eb1f30c42483d02320fcc4d1d829d1cde07d5f6fba98f2e198e4b56dea23b3c42d2e7979882ea3c839c195f53493671a1b36a3d6a46e6beddec081ec045ce580
+  data.tar.gz: f95b710af2bbe09bdd8e2200f8c07a06fb3e46b6302447eba378ca3d512f7bfbef1f3fe898e45d14f296f72b1f699e60b8b6259f009ee5925a3d442f5eeb360f

data/lib/sass-buttons/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Buttons
-    VERSION = "0.1.3"
+    VERSION = "0.1.4"
   end
 end

data/stylesheets/sass-buttons/_buttons.scss

@@ -93,7 +93,7 @@ button#{$unicorn-btn-namespace}:disabled {
 
 // FLAT BUTTON BASE
 @if $unicorn-btn-build-flat {
-    #{$unicorn-btn-namespace}-flat {
+    #{$unicorn-btn-namespace}-flat, #{$unicorn-btn-namespace}-flat-default {
         $unicorn-btn-background: $unicorn-btn-bgcolor;
         @include box-shadow(none);
         @include transition-property(background);
@@ -120,7 +120,7 @@ button#{$unicorn-btn-namespace}:disabled {
 
 // BORDER BUTTON BASE
 @if $unicorn-btn-build-flat {
-    #{$unicorn-btn-namespace}-border {
+    #{$unicorn-btn-namespace}-border,#{$unicorn-btn-namespace}-border-defalut {
         @include box-shadow(none);
         @include transition-property(all);
         @include transition-duration(.3s);
@@ -219,10 +219,36 @@ button#{$unicorn-btn-namespace}:disabled {
 @each $unicorn-btn-action in $unicorn-btn-actions {
     //GET NAME & COLOR
     $unicorn-btn-name: nth($unicorn-btn-action, 1);
+    $unicorn-btn-new-name: nth($unicorn-btn-action, 4);
     $unicorn-btn-background: nth($unicorn-btn-action, 2);
     $unicorn-btn-color: nth($unicorn-btn-action, 3);
 
     // .button-primary .button-action etc.
+
+
+    @if $unicorn-btn-new-name != ''{
+        #{$unicorn-btn-namespace}-#{$unicorn-btn-new-name} {
+            @include background(linear-gradient(top,  lighten($unicorn-btn-background, 5%), darken($unicorn-btn-background, 5%)));
+            background-color: $unicorn-btn-background;
+            border-color: darken($unicorn-btn-background, 10%);
+            color: $unicorn-btn-color;
+            text-shadow: 0 -1px 1px rgba(darken($unicorn-btn-background, 30%), 0.35);
+
+            &:hover {
+                background-color: $unicorn-btn-background;
+                @include background(linear-gradient(top,  lighten($unicorn-btn-background, 10%), darken($unicorn-btn-background, 5%)));
+            }
+            &:active {
+                background: desaturate($unicorn-btn-background, 20%);
+                color: darken($unicorn-btn-background, 20%);
+            }
+        }
+    }
+
+
+
+
+
     #{$unicorn-btn-namespace}-#{$unicorn-btn-name} {
         @include background(linear-gradient(top,  lighten($unicorn-btn-background, 5%), darken($unicorn-btn-background, 5%)));
         background-color: $unicorn-btn-background;
@@ -247,7 +273,40 @@ button#{$unicorn-btn-namespace}:disabled {
     @if $unicorn-btn-build-3d {
 
         // .button-border-primary .button-border-action etc.
-        #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-name} {
+        @if $unicorn-btn-new-name != ''{
+            #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-new-name}{
+                @include transition-property(all);
+                @include transition-duration(.3s);
+                @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 10%), 0px 8px 3px rgba(0, 0, 0, .30));
+                @include background(linear-gradient(top,  lighten($unicorn-btn-background, 2%), darken($unicorn-btn-background, 2%)));
+                background-color: $unicorn-btn-background;
+                color: $unicorn-btn-color;
+                border: 1px solid darken($unicorn-btn-background, 10%);
+                text-shadow: none;
+                position: relative;
+                top: 0px;
+
+                &:hover {
+                    @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 12%), 0px 8px 3px rgba(0, 0, 0, .30));
+                    @include background(linear-gradient(top,  lighten($unicorn-btn-background, 8%), darken($unicorn-btn-background, 1%)));
+                    background-color: lighten($unicorn-btn-background, 10%);
+                }
+                &:active {
+                    @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 2px 0px darken($unicorn-btn-background, 10%), 0px 3px 3px rgba(0, 0, 0, .30));
+                    @include background(linear-gradient(top,  darken($unicorn-btn-background, 2%), lighten($unicorn-btn-background, 2%)));
+                    background-color: desaturate($unicorn-btn-background, 20%);
+                    color: darken($unicorn-btn-background, 20%);
+                    border: 1px solid darken($unicorn-btn-background, 5%);
+                    top: 5px;
+                }
+                &.disabled {
+                    @include box-shadow(none);
+                    -webkit-appearance: none;
+                }
+            }
+
+        }
+        #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-name}{
             @include transition-property(all);
             @include transition-duration(.3s);
             @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 10%), 0px 8px 3px rgba(0, 0, 0, .30));
@@ -286,6 +345,34 @@ button#{$unicorn-btn-namespace}:disabled {
     @if $unicorn-btn-build-border {
 
         // .button-border-primary .button-border-action etc.
+        @if $unicorn-btn-new-name != ''{
+           #{$unicorn-btn-namespace}-border-#{$unicorn-btn-new-name} {
+               @include box-shadow(none);
+               @include transition-property(all);
+               @include transition-duration(.3s);
+               color: $unicorn-btn-background;
+               border: 2px solid $unicorn-btn-background;
+               background: none;
+               text-shadow: none;
+
+               &:hover {
+                   background: none;
+                   color: lighten($unicorn-btn-background, 10%);
+                   border: 2px solid lighten($unicorn-btn-background, 10%);
+               }
+               &:active {
+                   @include transition-duration(0s);
+                   background: none;
+                   color: darken($unicorn-btn-background, 10%);
+                   border: 2px solid darken($unicorn-btn-background, 10%);
+               }
+               &.disabled {
+                   @include box-shadow(none);
+                   -webkit-appearance: none;
+               }
+           }
+
+        }
         #{$unicorn-btn-namespace}-border-#{$unicorn-btn-name} {
             @include box-shadow(none);
             @include transition-property(all);
@@ -318,7 +405,32 @@ button#{$unicorn-btn-namespace}:disabled {
     //////////////////////////
     @if $unicorn-btn-build-flat {
         // .button-flat-primary .button-flat-action etc.
-        #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-name} {
+        @if $unicorn-btn-new-name != ''{
+            #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-new-name}{
+                @include box-shadow(none);
+                @include transition-property(background);
+                @include transition-duration(.3s);
+                background: $unicorn-btn-background;
+                color: $unicorn-btn-color;
+                text-shadow: none;
+                border: none;
+
+                &:hover {
+                    background: lighten($unicorn-btn-background, 5%);
+                }
+                &:active {
+                    @include transition-duration(0s);
+                    background: desaturate($unicorn-btn-background, 20%);
+                    color: darken($unicorn-btn-background, 15%);
+                }
+                &.disabled {
+                    @include box-shadow(none);
+                    -webkit-appearance: none;
+                }
+            }
+        }
+
+        #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-name}, {
             @include box-shadow(none);
             @include transition-property(background);
             @include transition-duration(.3s);

data/stylesheets/sass-buttons/_options.scss

@@ -5,14 +5,14 @@
 $unicorn-btn-namespace: '.button'; //prefix for all classes
 $unicorn-btn-glow-namespace: '.glow';
 $unicorn-btn-glow-color: #2c9adb;
-$unicorn-btn-bgcolor: #EEE;
+$unicorn-btn-bgcolor: #777;
 $unicorn-btn-height: 32px;
 
 
 //////////////////////////////////////////////////////////
 // TYPOGRAPHY ////////////////////////////////////////////
 //////////////////////////////////////////////////////////
-$unicorn-btn-font-color: #666;
+$unicorn-btn-font-color: #FFF;
 $unicorn-btn-font-size: 14px;
 $unicorn-btn-font-weight: 300;
 $unicorn-btn-font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@@ -22,7 +22,7 @@ $unicorn-btn-font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, A
 //////////////////////////////////////////////////////////
 
 // (name background-color font-color) add as many as you like.
-$unicorn-btn-actions: ('primary' #00A1CB #FFF) ('secondary' #FFF #FFF) ('action' #7db500 #FFF) ('highlight' #F18D05 #FFF)('caution' #E54028 #FFF) ('royal' #87318C #FFF);
+$unicorn-btn-actions: ('primary' #337ab7 #FFF '') ('secondary' #FFF #FFF '') ('action' #5cb85c #FFF "success") ('highlight' #f0ad4e #FFF "warning")('caution' #d9534f #FFF "danger") ('royal' #87318C #FFF '');
 // Remove any type to omit from final CSS build
 $unicorn-btn-types: 'rounded' 'pill' 'circle' 'dropdown' 'glow' 'flat' 'border' '3d';
 $unicorn-btn-sizes: 'jumbo' 'large' 'small' 'tiny';

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-buttons
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Lester Zhao
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-02-28 00:00:00.000000000 Z
+date: 2017-08-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -93,7 +93,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.6.10
 signing_key: 
 specification_version: 4
 summary: Easily create Awesome CSS buttons