oulu 0.11.1 → 0.11.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 749a4f51e80459d7a4be52f811c00fcd52ef9efb
-  data.tar.gz: 6c9cd23b5d621529e67d1f31095dfdac2ba4ff7a
+  metadata.gz: d5f3d1554b4c283831acd993b546add0325d1cd6
+  data.tar.gz: 0c7e30379b0b7bc9debd78428f43788cf4702de8
 SHA512:
-  metadata.gz: f7d00aa9d00ad5f2771c869a766ed7368dab831b308495671b9b92b3521fa638fbe991ba34ca0ac7230dc5cf68b0074cac2e930d886ff1ff4e97d440a456fa14
-  data.tar.gz: 0268473f94229084f632ba7cedd97333ae42840d999cd584f4e3a2cee100257a11e803dd11645e93d1100507b4af4b90e46973eed47f0882c3b9f60973f17cb7
+  metadata.gz: 8592a8cef41c5953652bf2911e5d916944b1c44f1d1ef586b40656fb863473b972be95c780dbe8b16985dffcdd5fb7450d072bfe5b6c1e63bd59a6f48d6baa01
+  data.tar.gz: 77378080f4e142e768f455cfe4a60319f610e01402cc25f6f0083d118afe714fc30ecf30444b9d3c6ff81619b0b289d40832e09850b51a5f32ee3e5c52e093be

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

@@ -1,6 +1,6 @@
 =normal-button-color($color, $root-color: true)
   background-color: $color
-  background-image: linear-gradient(top, tint($color, 6%) 0%, shade($color, 6%) 100%)
+  background-image: linear-gradient(to bottom, tint($color, 6%) 0%, shade($color, 6%) 100%)
   border-style: solid
   border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
   @if $root-color

data/app/assets/stylesheets/settings/functions/_math.sass

@@ -32,3 +32,15 @@
   @for $i from 0 through $prec
     $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)))
   @return $x
+
+@function ratio($n1, $n2, $n3)
+  @return ($n2 * $n3) / $n1
+
+@function second_decimal_place_foor($n)
+  @return(floor($n * 10) / 10)
+
+@function second_decimal_place_ceil($n)
+  @return(ceil($n * 10) / 10)
+
+@function second_decimal_place_round($n)
+  @return(round($n * 10) / 10)

data/app/assets/stylesheets/settings/mixins/_balloon-tail.sass

@@ -2,99 +2,291 @@
   position: absolute
   content: ""
   display: block
-  +border(all, solid transparent)
+  border: solid transparent
   +border(reverse($tail-direction), $tail-color)
+  +size(0)
 
-=tail-border-setting($tail-direction, $tail-width, $tail-height)
-  +border(horizontal, if(position_vertical($tail-direction), $tail-width, $tail-height))
-  +border(vertical, if(position_vertical($tail-direction), $tail-height, $tail-width))
-  $tail-direction: $tail-height*2*-1
+=vertical-triangle($tail-height, $tail-width, $tail-direction)
+  border-width: $tail-height ($tail-width / 2)
+  left: 50%
+  margin-left: ($tail-width / -2)
+  #{$tail-direction}: 0
+  margin-#{$tail-direction}: ($tail-height * -2)
 
-=tail-position-manual($tail-direction: false, $tail-border-color: false, $parent-boder-width: false, $tail-position-manuals: false)
-  @each $key, $value in $tail-position-manuals
-    @if position_vertical($tail-direction) and position_horizontal($key)
-      // 矢印の向きが上下で manual が left or right の場合
-      $key: $value + if($tail-border-color, $parent-boder-width, 0)
-    @else if position_horizontal($tail-direction) and position_vertical($key)
-      // 矢印の向きが左右で manual が top or bottom の場合
-      $key: $value + if($tail-border-color, $parent-boder-width, 0)
-    @else if reverse($tail-direction) == $key
-      // 上向き矢印 で manual が bottom の場合 or 下向き矢印 で manual が top の場合
-      $key: $value - if($tail-border-color, 0, $parent-boder-width)
+=horizontal-triangle($tail-height, $tail-width, $tail-direction)
+  border-width: ($tail-height / 2) $tail-width
+  top: 50%
+  margin-top: ($tail-height / -2)
+  #{$tail-direction}: 0
+  margin-#{$tail-direction}: ($tail-width * -2)
 
-=tail-border-position-manual($tail-direction: false, $tail-position-manuals: false)
-  @each $key, $value in $tail-position-manuals
-    @if position_vertical($tail-direction) and position_horizontal($key)
-      //矢印の向きが上下で  manual が left or right の場合
-      $key: $value
-    @else if position_horizontal($tail-direction) and position_vertical($key)
-      // 矢印の向きが左右で manual が top or bottom の場合
-      $key: $value
-    @else if reverse($tail-direction) == $key
-      // 上向き矢印 で manual が bottom の場合 or 下向き矢印 で manual が top の場合
-      $key: $value
+=tail-manual-position($tail-manual-position-direction, $tail-manual-position-value)
+  #{reverse($tail-manual-position-direction)}: auto
+  #{$tail-manual-position-direction}: $tail-manual-position-value
 
-// +balloon-tail(top red 12px 16px 1px, left 20px, blck)
-=balloon-tail($tail, $tail-position-manual: false, $tail-border-color: false)
-  // $tail
-  $tail-direction: optional_nth($tail, 1)
-  $tail-color: optional_nth($tail, 2)
-  $tail-width: optional_nth($tail, 3, 0)
-  $tail-height: optional_nth($tail, 4, 0)
-  $parent-boder-width: optional_nth($tail, 5, 0)
-  //$tail-position-manual
-  $tail-position-manual-direction1: optional_nth($tail-position-manual, 1)
-  $tail-position-manual-value1: optional_nth($tail-position-manual, 2)
-  $tail-position-manual-direction2: optional_nth($tail-position-manual, 3)
-  $tail-position-manual-value2: optional_nth($tail-position-manual, 4)
-  $tail-position-manuals: ($tail-position-manual-direction1: $tail-position-manual-value1, $tail-position-manual-direction2: $tail-position-manual-value2)
-  &:#{if($tail-border-color, after, before)}
-    +balloon-tail-setting($tail-direction, $tail-color)
-    @if position_vertical($tail-direction)
-      // 矢印の向きが上下
-      +border(vertical, $tail-height)
-      +border(horizontal, $tail-width/2)
-      $tail-direction: $tail-height*2*-1 - if($tail-border-color, 0, $parent-boder-width)
-      @if not $tail-position-manual or (length($tail-position-manual) == 2 and position_vertical($tail-position-manual-direction1))
-        // manual なし、または 一つだけ指定 上下方向 の場合
-        left: 50%
-        margin-left: $tail-width/2*-1
-      @if $tail-position-manual
-        +tail-position-manual($tail-direction, $tail-border-color, $parent-boder-width, $tail-position-manuals)
-    @if position_horizontal($tail-direction)
-      // 矢印の向きが左右
-      +border(horizontal, $tail-height)
-      +border(vertical, $tail-width/2)
-      $tail-direction: $tail-height*2*-1 - if($tail-border-color, 0, $parent-boder-width)
-      @if not $tail-position-manual or (length($tail-position-manual) == 2 and position_horizontal($tail-position-manual-direction1))
-        // manual なし、または 一つだけ指定 上下方向 の場合
-        top: 50%
-        margin-top: ($tail-width/2)*-1
-      @if $tail-position-manual
-        +tail-position-manual($tail-direction, $tail-border-color, $parent-boder-width, $tail-position-manuals)
+// +balloon-tail(top red 12px 16px 1px, black 1px, left 20px)
+=balloon-tail($tail-basic-values, $tail-border: false, $tail-manual-position: false)
+  // $tail-basic-values
+  $tail-direction: optional_nth($tail-basic-values, 1)
+  $tail-color: optional_nth($tail-basic-values, 2)
+  $tail-width: optional_nth($tail-basic-values, 3, 0)
+  $tail-height: optional_nth($tail-basic-values, 4, 0)
+  $tail-parent-boder-width: optional_nth($tail-basic-values, 5, 0)
+  // $tail-border
+  $tail-border-color: optional_nth($tail-border, 1)
+  $tail-border-width: optional_nth($tail-border, 2, 0)
+  // $tail-manual-position
+  $tail-manual-position-direction1: optional_nth($tail-manual-position, 1)
+  $tail-manual-position-value1: optional_nth($tail-manual-position, 2)
+  $tail-manual-position-direction2: optional_nth($tail-manual-position, 3)
+  $tail-manual-position-value2: optional_nth($tail-manual-position, 4)
 
-  @if $tail-border-color
-    // tail border があるとき - 以下 tail-border の設定
-    &:before
-      $tail-width: round($tail-width + $parent-boder-width*2)/2
-      $tail-height: round($tail-height + $parent-boder-width*2)
-      $tail-color: $tail-border-color
+  @if $tail-direction == 'top'
+    &::after
       +balloon-tail-setting($tail-direction, $tail-color)
-      @if position_vertical($tail-direction)
-        // 矢印の向きが上下
-        +tail-border-setting($tail-direction, $tail-width, $tail-height)
-        @if not $tail-position-manual or (length($tail-position-manual) == 2 and position_vertical($tail-position-manual-direction1))
-          // manual なし もしくは 一つだけ指定 上下方向 の場合
-          left: 50%
-          margin-left: round($tail-width*-1)
-        @if $tail-position-manual
-          +tail-border-position-manual($tail-direction, $tail-position-manuals)
-      @if position_horizontal($tail-direction)
-        // 矢印の向きが左右
-        +tail-border-setting($tail-direction, $tail-width, $tail-height)
-        @if not $tail-position-manual or (length($tail-position-manual) == 2 and position_horizontal($tail-position-manual-direction1))
-          // manual なし もしくは 一つだけ指定 左右方向 の場合
-          top: 50%
-          margin-top: $tail-width*-1
-        @if $tail-position-manual
-          +tail-border-position-manual($tail-direction, $tail-position-manuals)
+      +vertical-triangle($tail-height, $tail-width, top)
+      // manual-positionあり
+      @if $tail-manual-position
+        +tail-manual-position($tail-manual-position-direction1, $tail-manual-position-value1)
+        // 左右の場合
+        @if position_horizontal($tail-manual-position-direction1)
+          margin-#{$tail-manual-position-direction1}: $tail-border-width
+          @if $tail-manual-position-direction1 != 'left'
+            margin-left: 0
+        // 上下の場合
+        @else
+          @if $tail-manual-position-direction1 != 'top'
+            margin-top: 0
+        // manual-position2つ目あり
+        @if $tail-manual-position-direction2
+          +tail-manual-position($tail-manual-position-direction2, $tail-manual-position-value2)
+          // 左右の場合
+          @if position_horizontal($tail-manual-position-direction2)
+            margin-#{$tail-manual-position-direction2}: $tail-border-width
+            @if $tail-manual-position-direction2 != 'left'
+              margin-left: 0
+          // 上下の場合
+          @else
+            @if $tail-manual-position-direction2 != 'top'
+              margin-top: 0
+
+    @if $tail-border-color
+      &::before
+        $original-tail-width: $tail-width
+        $original-tail-height: $tail-height
+        $tail-width: $original-tail-width + $tail-border-width * 2
+        @if $original-tail-width <= $original-tail-height
+          $tail-height: $original-tail-height + $tail-border-width * 1.5
+        @else
+          $tail-height: second_decimal_place_ceil(ratio(strip_unit($original-tail-width), strip_unit($original-tail-height / 2), $tail-width) * 2)
+        +balloon-tail-setting($tail-direction, $tail-border-color)
+        +vertical-triangle($tail-height, $tail-width, top)
+        @if $tail-manual-position
+          +tail-manual-position($tail-manual-position-direction1, $tail-manual-position-value1)
+          // 左右の場合
+          @if position_horizontal($tail-manual-position-direction1)
+            margin-left: 0
+          // 上下の場合
+          @else
+            @if $tail-manual-position-direction1 == 'top'
+              margin-#{$tail-manual-position-direction1}: ($tail-height * -2)
+            @else if $tail-manual-position-direction1 != 'top'
+              margin-top: 0
+        // manual-position2つ目あり
+        @if $tail-manual-position-direction2
+          +tail-manual-position($tail-manual-position-direction2, $tail-manual-position-value2)
+          // 左右の場合
+          @if position_horizontal($tail-manual-position-direction2)
+            margin-left: 0
+          // 上下の場合
+          @else
+            @if $tail-manual-position-direction2 == 'top'
+              margin-#{$tail-manual-position-direction2}: ($tail-height * -2)
+            @else if $tail-manual-position-direction2 != 'top'
+              margin-top: 0
+
+
+  @else if $tail-direction == 'bottom'
+    &::after
+      +balloon-tail-setting($tail-direction, $tail-color)
+      +vertical-triangle($tail-height, $tail-width, bottom)
+      @if $tail-manual-position
+        +tail-manual-position($tail-manual-position-direction1, $tail-manual-position-value1)
+        // 左右の場合
+        @if position_horizontal($tail-manual-position-direction1)
+          margin-#{$tail-manual-position-direction1}: $tail-border-width
+          @if $tail-manual-position-direction1 != 'left'
+            margin-left: 0
+        // 上下の場合
+        @else
+          @if $tail-manual-position-direction1 == 'top'
+            margin-top: 0
+        // manual-position2つ目あり
+        @if $tail-manual-position-direction2
+          +tail-manual-position($tail-manual-position-direction2, $tail-manual-position-value2)
+          // 左右の場合
+          @if position_horizontal($tail-manual-position-direction2)
+            margin-#{$tail-manual-position-direction2}: $tail-border-width
+            @if $tail-manual-position-direction2 != 'left'
+              margin-left: 0
+          // 上下の場合
+          @else
+            @if $tail-manual-position-direction2 == 'top'
+              margin-top: 0
+
+    @if $tail-border-color
+      &::before
+        //
+          $original-tail-width: $tail-width
+          $original-tail-height: $tail-height
+          $tail-width: $original-tail-width + $tail-border-width * 2
+          $tail-height: $original-tail-height + $tail-border-width
+        $original-tail-width: $tail-width
+        $original-tail-height: $tail-height
+        $tail-width: $original-tail-width + $tail-border-width * 2
+        content: $original-tail-width / $original-tail-height
+        @if $original-tail-width <= $original-tail-height
+          $tail-height: $original-tail-height + $tail-border-width * 1.5
+        @else
+          $tail-height: second_decimal_place_ceil(ratio(strip_unit($original-tail-width), strip_unit($original-tail-height / 2), $tail-width) * 2)
+        +balloon-tail-setting($tail-direction, $tail-border-color)
+        +vertical-triangle($tail-height, $tail-width, bottom)
+        @if $tail-manual-position
+          +tail-manual-position($tail-manual-position-direction1, $tail-manual-position-value1)
+          // 左右の場合
+          @if position_horizontal($tail-manual-position-direction1)
+            margin-left: 0
+          // 上下の場合
+          @else
+            @if $tail-manual-position-direction1 == 'bottom'
+              margin-#{$tail-manual-position-direction1}: ($tail-height * -2)
+            @else if $tail-manual-position-direction1 == 'top'
+              margin-top: 0
+          // manual-position2つ目あり
+          @if $tail-manual-position-direction2
+            +tail-manual-position($tail-manual-position-direction2, $tail-manual-position-value2)
+            // 左右の場合
+            @if position_horizontal($tail-manual-position-direction2)
+              margin-left: 0
+            // 上下の場合
+            @else
+              @if $tail-manual-position-direction2 == 'bottom'
+                margin-#{$tail-manual-position-direction2}: ($tail-height * -2)
+              @else if $tail-manual-position-direction2 == 'top'
+                margin-top: 0
+
+  @else if $tail-direction == 'left'
+    &::after
+      +balloon-tail-setting($tail-direction, $tail-color)
+      +horizontal-triangle($tail-height, $tail-width, left)
+      @if $tail-manual-position
+        +tail-manual-position($tail-manual-position-direction1, $tail-manual-position-value1)
+        // 左右の場合
+        @if position_horizontal($tail-manual-position-direction1)
+          @if $tail-manual-position-direction1 != 'left'
+            margin-left: 0
+        // 上下の場合
+        @else
+          margin-#{$tail-manual-position-direction1}: $tail-border-width
+          @if $tail-manual-position-direction1 != 'top'
+            margin-top: 0
+        // manual-position2つ目あり
+        @if $tail-manual-position-direction2
+          +tail-manual-position($tail-manual-position-direction2, $tail-manual-position-value2)
+          // 左右の場合
+          @if position_horizontal($tail-manual-position-direction2)
+            @if $tail-manual-position-direction2 != 'left'
+              margin-left: 0
+          // 上下の場合
+          @else
+            margin-#{$tail-manual-position-direction2}: $tail-border-width
+            @if $tail-manual-position-direction2 != 'top'
+              margin-top: 0
+
+    @if $tail-border-color
+      &::before
+        $original-tail-width: $tail-width
+        $original-tail-height: $tail-height
+        $tail-height: $tail-height + ($tail-border-width * 2)
+        @if $original-tail-width > $original-tail-height
+          $tail-width: $tail-width + $tail-border-width * 2
+        @else
+          $tail-width: second_decimal_place_ceil(ratio(strip_unit($original-tail-height), (strip_unit($original-tail-width) / 2), $tail-height) * 2)
+        +balloon-tail-setting($tail-direction, $tail-border-color)
+        +horizontal-triangle($tail-height, $tail-width, left)
+        @if $tail-manual-position
+          +tail-manual-position($tail-manual-position-direction1, $tail-manual-position-value1)
+          @if position_vertical($tail-manual-position-direction1)
+            @if $tail-manual-position-direction1 == 'bottom'
+              margin-#{$tail-manual-position-direction1}: ($tail-height * -2)
+              margin-bottom: 0
+            @else if $tail-manual-position-direction1 == 'top'
+              margin-top: 0
+          // manual-position2つ目あり
+          @if $tail-manual-position-direction2
+            +tail-manual-position($tail-manual-position-direction2, $tail-manual-position-value2)
+            @if position_vertical($tail-manual-position-direction2)
+              @if $tail-manual-position-direction2 == 'bottom'
+                margin-#{$tail-manual-position-direction2}: ($tail-height * -2)
+                margin-bottom: 0
+              @else if $tail-manual-position-direction2 == 'top'
+                margin-top: 0
+
+  //////////////
+  // right
+  /////////////
+  @else if $tail-direction == 'right'
+    &::after
+      +balloon-tail-setting($tail-direction, $tail-color)
+      +horizontal-triangle($tail-height, $tail-width, right)
+      @if $tail-manual-position
+        +tail-manual-position($tail-manual-position-direction1, $tail-manual-position-value1)
+        // 左右の場合
+        @if position_horizontal($tail-manual-position-direction1)
+          @if $tail-manual-position-direction1 != 'left'
+            margin-left: 0
+        // 上下の場合
+        @else
+          margin-#{$tail-manual-position-direction1}: $tail-border-width
+          @if $tail-manual-position-direction1 != 'top'
+            margin-top: 0
+        // manual-position2つ目あり
+        @if $tail-manual-position-direction2
+          +tail-manual-position($tail-manual-position-direction2, $tail-manual-position-value2)
+          // 左右の場合
+          @if position_horizontal($tail-manual-position-direction2)
+            @if $tail-manual-position-direction2 != 'left'
+              margin-left: 0
+          // 上下の場合
+          @else
+            margin-#{$tail-manual-position-direction2}: $tail-border-width
+            @if $tail-manual-position-direction2 != 'top'
+              margin-top: 0
+    @if $tail-border-color
+      &::before
+        $original-tail-width: $tail-width
+        $original-tail-height: $tail-height
+        $tail-height: $tail-height + ($tail-border-width * 2)
+        @if $original-tail-width > $original-tail-height
+          $tail-width: $tail-width + $tail-border-width * 2
+        @else
+          $tail-width: second_decimal_place_ceil(ratio(strip_unit($original-tail-height), (strip_unit($original-tail-width) / 2), $tail-height) * 2)
+        +balloon-tail-setting($tail-direction, $tail-border-color)
+        +horizontal-triangle($tail-height, $tail-width, right)
+        @if $tail-manual-position
+          +tail-manual-position($tail-manual-position-direction1, $tail-manual-position-value1)
+          @if position_vertical($tail-manual-position-direction1)
+            @if $tail-manual-position-direction1 == 'bottom'
+              margin-#{$tail-manual-position-direction1}: ($tail-height * -2)
+              margin-bottom: 0
+            @else if $tail-manual-position-direction1 == 'top'
+              margin-top: 0
+          // manual-position2つ目あり
+          @if $tail-manual-position-direction2
+            +tail-manual-position($tail-manual-position-direction2, $tail-manual-position-value2)
+            @if position_vertical($tail-manual-position-direction2)
+              @if $tail-manual-position-direction2 == 'bottom'
+                margin-#{$tail-manual-position-direction2}: ($tail-height * -2)
+                margin-bottom: 0
+              @else if $tail-manual-position-direction2 == 'top'
+                margin-top: 0

data/bower.json

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

data/lib/oulu/version.rb

@@ -1,3 +1,3 @@
 module Oulu
-  VERSION = "0.11.1"
+  VERSION = "0.11.2"
 end

data/package.json

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: oulu
 version: !ruby/object:Gem::Version
-  version: 0.11.1
+  version: 0.11.2
 platform: ruby
 authors:
 - machida
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-03-25 00:00:00.000000000 Z
+date: 2016-03-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor