Add flat-round-button

oulu · Dec 9, 2015 · 367c287 · 367c287
1 parent b6e481b
commit 367c287
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 11 deletions.
diff --git a/lib/oulu-rails/version.rb b/lib/oulu-rails/version.rb
@@ -1,3 +1,3 @@
 module OuluRails
-  VERSION = "0.7.4"
+  VERSION = "0.7.5"
 end
diff --git a/vendor/assets/stylesheets/modules/buttons/_button-helper.sass b/vendor/assets/stylesheets/modules/buttons/_button-helper.sass
@@ -9,6 +9,12 @@
     +inline-block
     +rem('font-size', 12px)
     +rem('margin-left', 6px)
+  &.is-disabled,
+  &:disabled
+    pointer-events: none
+    cursor: default
+    select
+      cursor: default
 
 // button-group
 .is-button-group
@@ -18,7 +24,7 @@
     letter-spacing: normal
     font-size: 0
     [class^="is-button"]
-      +border-radius(0)
+      border-radius: 0
     &:first-child
       [class^="is-button"]
         +border-radius(left, 4px)

diff --git a/vendor/assets/stylesheets/modules/buttons/_buttons.sass b/vendor/assets/stylesheets/modules/buttons/_buttons.sass
@@ -1,6 +1,6 @@
 $button-sizes: xs, sm, md, lg, xl !default
 $button-color-names: default, primary, success, warning, danger !default
-$button-styles: normal, border, bold-border, flat-emboss, material !default
+$button-styles: normal, border, bold-border, flat-emboss, material, flat-round !default
 
 @import button-base
 
@@ -9,15 +9,10 @@ $button-styles: normal, border, bold-border, flat-emboss, material !default
 @import styles/border
 @import styles/flat-emboss
 @import styles/material
+@import styles/flat-round
 
 @import button-helper
 
-// inputのスタイルを継承させる
-input[type= submit]
-  color: inherit
-  font-size: inherit
-  font-weight: inherit
-
 =button($style, $size, $color, $options: false)
   +button-base
   @if $style == normal
@@ -35,6 +30,9 @@ input[type= submit]
   @else if $style == material
     +button-size($size, false, false)
     +material-button($color)
+  @else if $style == flat-round
+    +button-size($size, false, false)
+    +flat-round-button($color)
   @each $option in $options
     @if $option == 'left'
       text-align: left

diff --git a/vendor/assets/stylesheets/modules/buttons/styles/_flat-emboss.sass b/vendor/assets/stylesheets/modules/buttons/styles/_flat-emboss.sass
@@ -1,5 +1,3 @@
-body
-  content: #{luma(#f2f2f2)}
 =flat-emboss-button($color: blue)
   +transition(.5s (background-image))
   background-color: $color

diff --git a/vendor/assets/stylesheets/modules/buttons/styles/_flat-round.sass b/vendor/assets/stylesheets/modules/buttons/styles/_flat-round.sass
@@ -0,0 +1,23 @@
+=flat-round-button($color: blue)
+  +transition(.5s (background-image))
+  background-color: $color
+  color: luma_contrast_color($color)
+  font-weight: bold
+  border-radius: 1000px
+  &:hover,
+  &.hover,
+  &.is-hover
+    $color: lighten($color, 6%)
+    @if luma($color) > 90
+      background-color: #f2f2f2
+    @else
+      background-color: $color
+  &:active,
+  &.active,
+  &.is-active
+    $color: lighten($color, 6%)
+    @if luma($color) > 90
+      background-color: #f2f2f2
+    @else
+      background-color: $color
+    +top(1px)