_button-base.sass in oulu-0.12.14

- old
+ new

@@ -7,11 +7,11 @@
   user-select: none
   touch-action: manipulation
   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
   @else if $size == 'sm'
     $font-size: $sm-button-font-size
@@ -30,23 +30,25 @@
   +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
+  @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
   &.has-right-icon
     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
   &.is-input-container
     padding: 0
@@ -54,21 +56,21 @@
     i,
     .is-button-icon
       +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)
     $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%)
+      border-right: .0625rem 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)
@@ -90,22 +92,28 @@
     padding-left: $icon-space
     position: relative
     &: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)
     &:after
       $check-icon-size: round($font-size * 1.4)
       +fa("\f00c")
       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 &
     border-radius: 0
   .is-button-group >li:first-child &