sass-buttons 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. checksums.yaml +4 -4
  2. data/lib/sass-buttons/version.rb +1 -1
  3. data/stylesheets/sass-buttons/_buttons.scss +116 -4
  4. data/stylesheets/sass-buttons/_options.scss +3 -3
  5. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: ec6f6f2b001719fae2a83636aafe6e9c50a23ca3
4
- data.tar.gz: dc0bd64d2461a2921f133a5bdfee541f1f630f64
3
+ metadata.gz: 10ce831b1c2a979f0b48b9637ccfe5833028a93c
4
+ data.tar.gz: 62dddd570d88260a8d2a334f73a5ee73bd9d8a5b
5
5
  SHA512:
6
- metadata.gz: aee2ab35db46244bdbcd6d7dd3a06b01523d007c13f247191e764681dc51b6ebb1c9a43048e85f0db1df059180910a5e35fc3279710fb59a6b3390ecb36f198b
7
- data.tar.gz: 0c41438786e6b4861405078e445427b47885330af108944cf93d3830e012cc9f35c1863629b9c5326146a8f549967229d7f805e9c217da711a3e018244cb6c8a
6
+ metadata.gz: eb1f30c42483d02320fcc4d1d829d1cde07d5f6fba98f2e198e4b56dea23b3c42d2e7979882ea3c839c195f53493671a1b36a3d6a46e6beddec081ec045ce580
7
+ data.tar.gz: f95b710af2bbe09bdd8e2200f8c07a06fb3e46b6302447eba378ca3d512f7bfbef1f3fe898e45d14f296f72b1f699e60b8b6259f009ee5925a3d442f5eeb360f
data/lib/sass-buttons/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Buttons
3
- VERSION = "0.1.3"
3
+ VERSION = "0.1.4"
4
4
  end
5
5
  end
data/stylesheets/sass-buttons/_buttons.scss CHANGED
@@ -93,7 +93,7 @@ button#{$unicorn-btn-namespace}:disabled {
93
93
 
94
94
  // FLAT BUTTON BASE
95
95
  @if $unicorn-btn-build-flat {
96
- #{$unicorn-btn-namespace}-flat {
96
+ #{$unicorn-btn-namespace}-flat, #{$unicorn-btn-namespace}-flat-default {
97
97
  $unicorn-btn-background: $unicorn-btn-bgcolor;
98
98
  @include box-shadow(none);
99
99
  @include transition-property(background);
@@ -120,7 +120,7 @@ button#{$unicorn-btn-namespace}:disabled {
120
120
 
121
121
  // BORDER BUTTON BASE
122
122
  @if $unicorn-btn-build-flat {
123
- #{$unicorn-btn-namespace}-border {
123
+ #{$unicorn-btn-namespace}-border,#{$unicorn-btn-namespace}-border-defalut {
124
124
  @include box-shadow(none);
125
125
  @include transition-property(all);
126
126
  @include transition-duration(.3s);
@@ -219,10 +219,36 @@ button#{$unicorn-btn-namespace}:disabled {
219
219
  @each $unicorn-btn-action in $unicorn-btn-actions {
220
220
  //GET NAME & COLOR
221
221
  $unicorn-btn-name: nth($unicorn-btn-action, 1);
222
+ $unicorn-btn-new-name: nth($unicorn-btn-action, 4);
222
223
  $unicorn-btn-background: nth($unicorn-btn-action, 2);
223
224
  $unicorn-btn-color: nth($unicorn-btn-action, 3);
224
225
 
225
226
  // .button-primary .button-action etc.
227
+
228
+
229
+ @if $unicorn-btn-new-name != ''{
230
+ #{$unicorn-btn-namespace}-#{$unicorn-btn-new-name} {
231
+ @include background(linear-gradient(top, lighten($unicorn-btn-background, 5%), darken($unicorn-btn-background, 5%)));
232
+ background-color: $unicorn-btn-background;
233
+ border-color: darken($unicorn-btn-background, 10%);
234
+ color: $unicorn-btn-color;
235
+ text-shadow: 0 -1px 1px rgba(darken($unicorn-btn-background, 30%), 0.35);
236
+
237
+ &:hover {
238
+ background-color: $unicorn-btn-background;
239
+ @include background(linear-gradient(top, lighten($unicorn-btn-background, 10%), darken($unicorn-btn-background, 5%)));
240
+ }
241
+ &:active {
242
+ background: desaturate($unicorn-btn-background, 20%);
243
+ color: darken($unicorn-btn-background, 20%);
244
+ }
245
+ }
246
+ }
247
+
248
+
249
+
250
+
251
+
226
252
  #{$unicorn-btn-namespace}-#{$unicorn-btn-name} {
227
253
  @include background(linear-gradient(top, lighten($unicorn-btn-background, 5%), darken($unicorn-btn-background, 5%)));
228
254
  background-color: $unicorn-btn-background;
@@ -247,7 +273,40 @@ button#{$unicorn-btn-namespace}:disabled {
247
273
  @if $unicorn-btn-build-3d {
248
274
 
249
275
  // .button-border-primary .button-border-action etc.
250
- #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-name} {
276
+ @if $unicorn-btn-new-name != ''{
277
+ #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-new-name}{
278
+ @include transition-property(all);
279
+ @include transition-duration(.3s);
280
+ @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));
281
+ @include background(linear-gradient(top, lighten($unicorn-btn-background, 2%), darken($unicorn-btn-background, 2%)));
282
+ background-color: $unicorn-btn-background;
283
+ color: $unicorn-btn-color;
284
+ border: 1px solid darken($unicorn-btn-background, 10%);
285
+ text-shadow: none;
286
+ position: relative;
287
+ top: 0px;
288
+
289
+ &:hover {
290
+ @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));
291
+ @include background(linear-gradient(top, lighten($unicorn-btn-background, 8%), darken($unicorn-btn-background, 1%)));
292
+ background-color: lighten($unicorn-btn-background, 10%);
293
+ }
294
+ &:active {
295
+ @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));
296
+ @include background(linear-gradient(top, darken($unicorn-btn-background, 2%), lighten($unicorn-btn-background, 2%)));
297
+ background-color: desaturate($unicorn-btn-background, 20%);
298
+ color: darken($unicorn-btn-background, 20%);
299
+ border: 1px solid darken($unicorn-btn-background, 5%);
300
+ top: 5px;
301
+ }
302
+ &.disabled {
303
+ @include box-shadow(none);
304
+ -webkit-appearance: none;
305
+ }
306
+ }
307
+
308
+ }
309
+ #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-name}{
251
310
  @include transition-property(all);
252
311
  @include transition-duration(.3s);
253
312
  @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 {
286
345
  @if $unicorn-btn-build-border {
287
346
 
288
347
  // .button-border-primary .button-border-action etc.
348
+ @if $unicorn-btn-new-name != ''{
349
+ #{$unicorn-btn-namespace}-border-#{$unicorn-btn-new-name} {
350
+ @include box-shadow(none);
351
+ @include transition-property(all);
352
+ @include transition-duration(.3s);
353
+ color: $unicorn-btn-background;
354
+ border: 2px solid $unicorn-btn-background;
355
+ background: none;
356
+ text-shadow: none;
357
+
358
+ &:hover {
359
+ background: none;
360
+ color: lighten($unicorn-btn-background, 10%);
361
+ border: 2px solid lighten($unicorn-btn-background, 10%);
362
+ }
363
+ &:active {
364
+ @include transition-duration(0s);
365
+ background: none;
366
+ color: darken($unicorn-btn-background, 10%);
367
+ border: 2px solid darken($unicorn-btn-background, 10%);
368
+ }
369
+ &.disabled {
370
+ @include box-shadow(none);
371
+ -webkit-appearance: none;
372
+ }
373
+ }
374
+
375
+ }
289
376
  #{$unicorn-btn-namespace}-border-#{$unicorn-btn-name} {
290
377
  @include box-shadow(none);
291
378
  @include transition-property(all);
@@ -318,7 +405,32 @@ button#{$unicorn-btn-namespace}:disabled {
318
405
  //////////////////////////
319
406
  @if $unicorn-btn-build-flat {
320
407
  // .button-flat-primary .button-flat-action etc.
321
- #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-name} {
408
+ @if $unicorn-btn-new-name != ''{
409
+ #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-new-name}{
410
+ @include box-shadow(none);
411
+ @include transition-property(background);
412
+ @include transition-duration(.3s);
413
+ background: $unicorn-btn-background;
414
+ color: $unicorn-btn-color;
415
+ text-shadow: none;
416
+ border: none;
417
+
418
+ &:hover {
419
+ background: lighten($unicorn-btn-background, 5%);
420
+ }
421
+ &:active {
422
+ @include transition-duration(0s);
423
+ background: desaturate($unicorn-btn-background, 20%);
424
+ color: darken($unicorn-btn-background, 15%);
425
+ }
426
+ &.disabled {
427
+ @include box-shadow(none);
428
+ -webkit-appearance: none;
429
+ }
430
+ }
431
+ }
432
+
433
+ #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-name}, {
322
434
  @include box-shadow(none);
323
435
  @include transition-property(background);
324
436
  @include transition-duration(.3s);
data/stylesheets/sass-buttons/_options.scss CHANGED
@@ -5,14 +5,14 @@
5
5
  $unicorn-btn-namespace: '.button'; //prefix for all classes
6
6
  $unicorn-btn-glow-namespace: '.glow';
7
7
  $unicorn-btn-glow-color: #2c9adb;
8
- $unicorn-btn-bgcolor: #EEE;
8
+ $unicorn-btn-bgcolor: #777;
9
9
  $unicorn-btn-height: 32px;
10
10
 
11
11
 
12
12
  //////////////////////////////////////////////////////////
13
13
  // TYPOGRAPHY ////////////////////////////////////////////
14
14
  //////////////////////////////////////////////////////////
15
- $unicorn-btn-font-color: #666;
15
+ $unicorn-btn-font-color: #FFF;
16
16
  $unicorn-btn-font-size: 14px;
17
17
  $unicorn-btn-font-weight: 300;
18
18
  $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
22
22
  //////////////////////////////////////////////////////////
23
23
 
24
24
  // (name background-color font-color) add as many as you like.
25
- $unicorn-btn-actions: ('primary' #00A1CB #FFF) ('secondary' #FFF #FFF) ('action' #7db500 #FFF) ('highlight' #F18D05 #FFF)('caution' #E54028 #FFF) ('royal' #87318C #FFF);
25
+ $unicorn-btn-actions: ('primary' #337ab7 #FFF '') ('secondary' #FFF #FFF '') ('action' #5cb85c #FFF "success") ('highlight' #f0ad4e #FFF "warning")('caution' #d9534f #FFF "danger") ('royal' #87318C #FFF '');
26
26
  // Remove any type to omit from final CSS build
27
27
  $unicorn-btn-types: 'rounded' 'pill' 'circle' 'dropdown' 'glow' 'flat' 'border' '3d';
28
28
  $unicorn-btn-sizes: 'jumbo' 'large' 'small' 'tiny';
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-buttons
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.3
4
+ version: 0.1.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lester Zhao
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-02-28 00:00:00.000000000 Z
11
+ date: 2017-08-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -93,7 +93,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
93
93
  version: '0'
94
94
  requirements: []
95
95
  rubyforge_project:
96
- rubygems_version: 2.2.2
96
+ rubygems_version: 2.6.10
97
97
  signing_key:
98
98
  specification_version: 4
99
99
  summary: Easily create Awesome CSS buttons