_button-base.sass in oulu-0.10.1

- old
+ new

@@ -1,15 +1,15 @@
 =button-base
   +inline-block(middle)
   cursor: pointer
   text-align: center
-  +user-select(none)
+  user-select: none
   touch-action: manipulation
   text-decoration: none
   -webkit-tap-highlight-color: transparent
 
-=button-size($size, $border-width: 0, $border-radius: 4px)
+=button-size($size, $border-width: false, $border-radius: 4px)
   $font-size: ""
   @if $size == 'xs'
     $font-size: $xs-button-font-size
   @else if $size == 'sm'
     $font-size: $sm-button-font-size
@@ -17,18 +17,19 @@
     $font-size: $md-button-font-size
   @else if $size == 'lg'
     $font-size: $lg-button-font-size
   @else if $size == 'xl'
     $font-size: $xl-button-font-size
-  $height: round($font-size * 2 + $font-size/2.2)
+  $button-height: round($font-size * 2.5 - if($border-width, $border-width, 0) * 2)
   @if $border-width
     +border(all, $border-width)
   @else
     $border-width: 0
-  +text-block($font-size $height - ($border-width*2))
-  height: $height
-  +padding(horizontal, $height/1.6)
+  $vertical-padding: ($button-height - round($font-size * 1.45) - ($border-width* 2)) / 2
+  +padding(vertical, $vertical-padding)
+  +text-block($font-size 1.45)
+  +padding(horizontal, $button-height/1.6)
   @if $border-radius
     +border-radius($border-radius)
   @if $font-size > 12px
     font-weight: bold
   i,
@@ -48,14 +49,70 @@
   &.is-input-container
     padding: 0
     position: relative
     i,
     .is-button-icon
-      +position(absolute, left $height/2, top 0)
-      line-height: $height - ($border-width*2)
+      +position(absolute, left $button-height/2, top 0)
+      line-height: $button-height - ($border-width*2)
     input
-      +padding(horizontal, ($height + if($font-size > 28, $font-size/4, $font-size/3)) $height/2)
-      height: $height - ($border-width*2)
+      +padding(horizontal, ($button-height + if($font-size > 28, $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)
+    $icon-size: round($font-size * 1.3)
+    $button-height: $button-height
+    padding-left: $icon-width
+    &:before
+      +fa("\f0d7")
+      +position(absolute, left 0, top 0)
+      border-right: 1px solid shade($secondary, 15%)
+      +text-block($icon-size $button-height, center shade($secondary, 55%))
+      +size($icon-width $button-height)
+  &.is-select
+    padding: 0
+    $icon-width: round($font-size * 2.7)
+    $icon-size: round($font-size * 1.3)
+    position: relative
+    &:after
+      +fa("\f0d7")
+      +position(absolute, right 0, top 0 bottom 0, 0)
+      +text-block($icon-size $button-height, center)
+      +size($icon-width null)
+    select
+      padding: 0 (round($font-size * 1.4) + $icon-width) 0 round($font-size * 1.4)
+      font-size: inherit
+      +padding(vertical, $vertical-padding)
+      +position(relative, 1)
+  &.is-radio,
+  &.is-checkbox
+    $icon-space: round($font-size * 2.2)
+    padding-left: $icon-space
+    position: relative
+    &:before
+      content: ""
+      display: block
+      +position(absolute, left 16px, top 50%)
+      $check-base-size: round($font-size * .9)
+      +size($check-base-size)
+      margin-top: round($check-base-size / -2)
+    &:after
+      $check-icon-size: round($font-size * 1.4)
+      +fa("\f00c")
+      opacity: 0
+      +size($check-icon-size)
+      +text-block($check-icon-size 1, $checked-icon)
+      text-shadow: rgba(black, .4) 0 1px 1px
+      +position(absolute, left 14px, top 50%)
+      margin-top: round($check-icon-size / -2 * 1.2)
+
+  // button-grounp
+  .is-button-group >li &
+    border-radius: 0
+  .is-button-group >li:first-child &
+    border-radius: $border-radius 0 0 $border-radius
+  .is-button-group  >li:last-child &
+    border-radius: 0 $border-radius $border-radius 0
+
 
 =button-group
   .is-button-group
     @content