oulu 0.12.13 → 0.12.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6a1d0b0004e120e5b4c39feb3571730cb29cc6cd
-  data.tar.gz: 2cd5dcb225b6274e835a6468b3b0d5318c6d9553
+  metadata.gz: 065b83cbaea0d7dfa541b299812be5febc63fea9
+  data.tar.gz: a008410b0e462536ee9f22ca157f41ebfa8feb89
 SHA512:
-  metadata.gz: 61be3ec2c20bde48b7ff956017129ce7c13509608955fb0f042ee3f234dd7f10d5d6734aacff746113c763cd7209992487e112cf37033b31a7251864997113dc
-  data.tar.gz: 076e55046f88826d418a35dcd5e4680050a940d98a09277921b12a5342378fef8668822ecaca35d86b5fb7c34b67a5a1409e3ac47cdec6cb4886385792419bae
+  metadata.gz: ee001854fb602045d3e2df75a0bb134251ce39cedbb7663cba8ad21a03eeed97cc64e7d634a01da7b47ddbe442b642e6cb771e7b9d50be1c4c965f27ef371eac
+  data.tar.gz: 50131a6a5d635cf844af4b2ed0dad1d4697d2b6b9ba7959375fd52b6392c4c9c6430992251707bd86b42d6f42346f50a1115b9e12f2363fe9816db27fa11ec9e

data/app/assets/stylesheets/modules/buttons/_button-base.sass

@@ -9,7 +9,7 @@
   text-decoration: none
   -webkit-tap-highlight-color: transparent
 
-=button-size($size, $border-width: false, $border-radius: 4px, $button-height-ratio: 2.85)
+=button-size($size, $border-width: false, $border-radius: .25rem, $button-height-ratio: 2.85)
   $font-size: ""
   @if $size == 'xs'
     $font-size: $xs-button-font-size
@@ -32,11 +32,13 @@
   +padding(horizontal, $button-height/1.6)
   @if $border-radius
     +border-radius($border-radius)
-  @if $font-size > 12px
+  @if $font-size > .6875rem and 1rem > $font-size
+    font-weight: 600
+  @else if 1rem < $font-size
     font-weight: bold
   i,
   .is-button-icon
-    @if $font-size > 28
+    @if $font-size > 1.75rem
       margin-right: $font-size/4
     @else
       margin-right: $font-size/3
@@ -44,7 +46,7 @@
     i,
     .is-button-icon
       margin-right: 0
-      @if $font-size > 28
+      @if $font-size > 1.75rem
         margin-left: $font-size/4
       @else
         margin-left: $font-size/3
@@ -56,7 +58,7 @@
       +position(absolute, left $button-height/2, top 0)
       line-height: $button-height - ($border-width*2)
     input
-      +padding(horizontal, ($button-height + if($font-size > 28, $font-size/4, $font-size/3)) $button-height/2)
+      +padding(horizontal, ($button-height + if($font-size > 1.75rem, $font-size/4, $font-size/3)) $button-height/2)
       height: $button-height - ($border-width*2)
   &.is-dummy-select
     $icon-width: round($font-size * 2.7)
@@ -66,7 +68,7 @@
     &:before
       +fa("\f0d7")
       +position(absolute, left 0, top 0)
-      border-right: 1px solid shade($secondary, 15%)
+      border-right: .0625rem solid shade($secondary, 15%)
       +text-block($icon-size $button-height, center shade($secondary, 55%))
       +size($icon-width $button-height)
   &.is-select
@@ -92,7 +94,7 @@
     &:before
       content: ""
       display: block
-      +position(absolute, left 16px, top 50%)
+      +position(absolute, left 1rem, top 50%)
       $check-base-size: round($font-size * .9)
       +size($check-base-size)
       margin-top: round($check-base-size / -2)
@@ -102,9 +104,15 @@
       opacity: 0
       +size($check-icon-size)
       +text-block($check-icon-size 1, $button-checked-icon-color)
-      text-shadow: rgba(black, .4) 0 1px 1px
-      +position(absolute, left 14px, top 50%)
+      text-shadow: rgba(black, .4) 0 .0625rem .0625rem
+      +position(absolute, left .875rem, top 50%)
       margin-top: round($check-icon-size / -2 * 1.2)
+  &.is-icon
+    +padding(horizontal, $button-height/3.5)
+    i,
+    .is-button-icon
+      margin-right: 0
+
 
   // button-grounp
   .is-button-group >li &

data/app/assets/stylesheets/modules/buttons/_button-helper.sass

@@ -6,8 +6,8 @@
     height: auto
   .is-button-note
     +inline-block
-    font-size: 12px
-    margin-left: 6px
+    font-size: .75rem
+    margin-left: .375rem
   &.is-block
     display: flex
     width: 100%
@@ -28,7 +28,7 @@
       border-radius: 50%
   &.is-checkbox
     &:before
-      border-radius: 3px
+      border-radius: .1875rem
   &.is-no-move
     &:active,
     &.is-checked

data/app/assets/stylesheets/modules/buttons/_buttons.sass

@@ -7,22 +7,23 @@
 @import styles/material
 @import styles/flat-round
 @import styles/super-bold-border
+@import styles/standard
 
 @import button-helper
 
 =button($style, $size, $color, $options: false)
   +button-base
   @if $style == normal
-    +button-size($size, 1px, 4px)
+    +button-size($size, .0625rem, .25rem)
     +normal-button($color)
   @else if $style == border
-    +button-size($size, 1px, 4px)
+    +button-size($size, .0625rem, .25rem)
     +border-button($color)
   @else if $style == bold-border
-    +button-size($size, 2px, 8px)
+    +button-size($size, .125rem, .5rem)
     +border-button($color)
   @else if $style == flat-emboss
-    +button-size($size, false, 4px)
+    +button-size($size, false, .25rem)
     +flat-emboss-button($color)
   @else if $style == material
     +button-size($size, false, false)
@@ -31,8 +32,11 @@
     +button-size($size, false, 1000px)
     +flat-round-button($color)
   @else if $style == super-bold-border
-    +button-size($size, 4px, 6px, 3.4)
+    +button-size($size, .25rem, .375rem, 3.4)
     +super-bold-border-button($color, $size)
+  @else if $style == standard
+    +button-size($size, .0625rem, .25rem)
+    +standard-button($color)
   @each $option in $options
     @if $option == 'left'
       text-align: left

data/app/assets/stylesheets/modules/buttons/styles/_standard.sass

@@ -0,0 +1,68 @@
+=standard-button-color($color, $root-color: true)
+  @if luma($color) > 90
+    $color: shade($color, .5%)
+  background-color: $color
+  background-image: linear-gradient(to bottom, tint($color, 14%) 0%, shade($color, 14%) 100%)
+  border-style: solid
+  border-color: shade($color, 14%) shade($color, 22%) shade($color, 30%)
+  @if $root-color
+    color: luma_contrast_color($color)
+    &:hover,
+    &.hover,
+    &.is-hover,
+    &:active,
+    &.active,
+    &.is-active
+      color: luma_contrast_color($color)
+
+=standard-button($color: blue)
+  transition: .5s (background-image)
+  +standard-button-color($color)
+  &:hover,
+  &.hover,
+  &.is-hover
+    +standard-button-color(darken($color, 10%), false)
+  &:active,
+  &.active,
+  &.is-active
+    $color: darken($color, 12%)
+    box-shadow: darken($color, 16%) 0 1px 1px inset
+    +standard-button-color($color, false)
+    background-image: linear-gradient(to bottom, shade($color, 14%) 0%, tint($color, 14%) 100%)
+    border-color: shade($color, 30%) shade($color, 22%) shade($color, 14%)
+
+  // radio & checkbos
+  &.is-radio,
+  &.is-checkbox
+    &:before
+      box-shadow: rgba(black, 0.2) 0 1px 1px inset
+      background-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
+
+  // checked
+  &.is-checked
+    color: luma_contrast_color($button-checked-color)
+    +standard-button-color($button-checked-color, true)
+    border-color: shade($button-checked-color, 10%) shade($button-checked-color, 16%) shade($button-checked-color, 26%)
+    box-shadow: darken($button-checked-color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
+    +top(1px)
+    &:before
+      box-shadow: rgba(black, 0.2) 0 1px 1px inset
+      background-color: #{if(luma_bright($button-checked-color), tint($button-checked-color, 20%), shade($button-checked-color, 20%))}
+
+  // select
+  &.is-select
+    &:after
+      color: rgba(luma_contrast_color($color), .7)
+      border-left: 1px solid
+      border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
+
+  // disabled
+  &.is-disabled,
+  &:disabled
+    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
+    background-color: rgba($color, 7)
+    background-image: none
+    color: rgba(luma_contrast_color($color), .7)
+    border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
+    text-shadow: none
+    box-shadow: none

data/app/assets/stylesheets/settings/variables/_modules.sass

@@ -13,15 +13,15 @@ $danger: #da4453 !default
 // buttons
 ////////////////
 
-$xs-button-font-size: 12px !default
-$sm-button-font-size: 14px !default
-$md-button-font-size: 16px !default
-$lg-button-font-size: 18px !default
-$xl-button-font-size: 20px !default
+$xs-button-font-size: .75rem !default
+$sm-button-font-size: .875rem !default
+$md-button-font-size: 1rem !default
+$lg-button-font-size: 1.125rem !default
+$xl-button-font-size: 1.25rem !default
 
 $button-sizes: xs, sm, md, lg, xl !default
 $button-color-names: secondary, primary, success, info, warning, danger !default
-$button-styles: normal, border, bold-border, flat-emboss, material, flat-round, super-bold-border !default
+$button-styles: normal, border, bold-border, flat-emboss, material, flat-round, super-bold-border, standard !default
 
 $button-checked-color: #4FC1E9 !default
 $button-checked-icon-color: #FC6E51 !default

data/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "oulu",
-  "version": "0.12.13",
+  "version": "0.12.14",
   "main": "index.js",
   "repository": {
     "type": "git",

data/lib/oulu/version.rb

@@ -1,3 +1,3 @@
 module Oulu
-  VERSION = "0.12.13"
+  VERSION = "0.12.14"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oulu",
-  "version": "0.12.13",
+  "version": "0.12.14",
   "main": "index.js",
   "repository": {
     "type": "git",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: oulu
 version: !ruby/object:Gem::Version
-  version: 0.12.13
+  version: 0.12.14
 platform: ruby
 authors:
 - machida
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-08-25 00:00:00.000000000 Z
+date: 2016-08-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor
@@ -76,6 +76,7 @@ files:
 - app/assets/stylesheets/modules/buttons/styles/_flat-round.sass
 - app/assets/stylesheets/modules/buttons/styles/_material.sass
 - app/assets/stylesheets/modules/buttons/styles/_normal.sass
+- app/assets/stylesheets/modules/buttons/styles/_standard.sass
 - app/assets/stylesheets/modules/buttons/styles/_super-bold-border.sass
 - app/assets/stylesheets/modules/glitch/_glitch.sass
 - app/assets/stylesheets/modules/navs/_tabs-nav.sass