bulma-rails 0.2.3 → 0.3.0

data/app/assets/stylesheets/sass/layout/footer.sass

@@ -1,13 +1,3 @@
 .footer
   background-color: $background
-  padding: 40px 20px 80px
-  a
-    &,
-    &:visited
-      color: $text
-      &:hover
-        color: $text-strong
-      &:not(.icon)
-        border-bottom: 1px solid $border
-        &:hover
-          border-bottom-color: $link
+  padding: 3rem 1.5rem 6rem

data/app/assets/stylesheets/sass/layout/hero.sass

@@ -18,31 +18,32 @@
     display: none
 
 .hero-buttons
-  margin-top: 20px
+  margin-top: 1.5rem
   // Responsiveness
   +mobile
     .button
       display: flex
       &:not(:last-child)
-        margin-bottom: 10px
+        margin-bottom: 0.75rem
   +tablet
     display: flex
     justify-content: center
     .button:not(:last-child)
-      margin-right: 20px
+      margin-right: 1.5rem
 
 // Containers
 
 .hero-head,
 .hero-foot
+  flex-grow: 0
   flex-shrink: 0
 
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: 40px 20px
+  padding: 3rem 1.5rem
   // Responsiveness
-  +from(1240px)
+  +from($widescreen)
     padding-left: 0
     padding-right: 0
 
@@ -67,11 +68,11 @@
     &.is-#{$name}
       background-color: $color
       color: $color-invert
+      a,
+      strong
+        color: inherit
       .title
         color: $color-invert
-        a,
-        strong
-          color: inherit
       .subtitle
         color: rgba($color-invert, 0.9)
         a,
@@ -131,13 +132,13 @@
   &.is-medium
     +tablet
       .hero-body
-        padding-bottom: 120px
-        padding-top: 120px
+        padding-bottom: 9rem
+        padding-top: 9rem
   &.is-large
     +tablet
       .hero-body
-        padding-bottom: 240px
-        padding-top: 240px
+        padding-bottom: 18rem
+        padding-top: 18rem
   &.is-fullheight
     min-height: 100vh
     .hero-body

data/app/assets/stylesheets/sass/layout/section.sass

@@ -1,10 +1,10 @@
 .section
   background-color: $white
-  padding: 40px 20px
+  padding: 3rem 1.5rem
   // Responsiveness
   +desktop
     // Sizes
     &.is-medium
-      padding: 120px 20px
+      padding: 9rem 1.5rem
     &.is-large
-      padding: 240px 20px
+      padding: 18rem 1.5rem

data/app/assets/stylesheets/sass/utilities/controls.sass

@@ -1,75 +1,37 @@
-$control: $text-strong !default
-$control-background: $text-invert !default
-$control-border: $border !default
-
-$control-hover: $link-hover !default
-$control-hover-border: $border-hover !default
-
-$control-active: $link !default
-$control-active-background: $link !default
-$control-active-background-invert: $link-invert !default
-$control-active-border: $link !default
-
-$control-disabled: $border !default
-$control-disabled-background: $background !default
-
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
-$control-size: $size-normal !default
-$control-size-small: $size-small !default
-
-$control-icon: $grey-lighter !default
-$control-icon-active: $grey-light !default
 
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  background-color: $control-background
-  border: 1px solid $control-border
+  border: none
   border-radius: $control-radius
-  color: $control
+  box-shadow: none
   display: inline-flex
-  font-size: $control-size
-  height: 32px
+  font-size: $size-normal
+  height: 2.5em
   justify-content: flex-start
-  line-height: 24px
-  padding-left: 8px
-  padding-right: 8px
+  line-height: 1.5
+  padding-left: 0.75em
+  padding-right: 0.75em
   position: relative
   vertical-align: top
-  &:hover
-    border-color: $control-hover-border
-  &:active,
+  // States
   &:focus,
+  &.is-focused,
+  &:active,
   &.is-active
-    border-color: $control-active-border
     outline: none
   &[disabled],
   &.is-disabled
-    background-color: $control-disabled-background
-    border-color: $control-disabled
-    cursor: not-allowed
     pointer-events: none
-    +placeholder
-      color: rgba($control, 0.3)
 
+// The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
+  font-size: $size-small
 =control-medium
-  font-size: 18px
-  height: 40px
-  line-height: 32px
-  padding-left: 10px
-  padding-right: 10px
+  font-size: $size-medium
 =control-large
-  font-size: 24px
-  height: 48px
-  line-height: 40px
-  padding-left: 12px
-  padding-right: 12px
+  font-size: $size-large

data/app/assets/stylesheets/sass/utilities/functions.sass

@@ -23,6 +23,14 @@
 
 @function findColorInvert($color)
   @if (colorLuminance($color) > 0.55)
-    @return rgba(black, 0.7)
+    @return rgba(#000, 0.7)
   @else
-    @return white
+    @return #fff
+
+@function removeUnit($number)
+  @if type-of($number) == 'number' and not unitless($number)
+    @return $number / ($number * 0 + 1)
+  @return $number
+
+@function roundToEvenNumber($number)
+  @return floor($number / 2) * 2

data/app/assets/stylesheets/sass/utilities/mixins.sass

@@ -4,15 +4,15 @@
   border-top: 0
   content: " "
   display: block
-  height: 7px
+  height: 0.5em
   pointer-events: none
   position: absolute
   transform: rotate(-45deg)
-  width: 7px
+  width: 0.5em
 
 =block
   &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: 1.5rem
 
 =clearfix
   &:after
@@ -28,47 +28,57 @@
   top: 50%
 
 =delete
+  // We need even pixel dimensions to ensure the delete cross can be perfectly centered
+  $dimension-small: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-small)) * 1px
+  $dimension-normal: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-normal)) * 1px
+  $dimension-medium: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-medium)) * 1px
+  $dimension-large: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-large)) * 1px
   +unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background-color: rgba($black, 0.1)
+  background-color: rgba($black, 0.2)
   border: none
   border-radius: 290486px
   cursor: pointer
   display: inline-block
-  height: 24px
+  font-size: $size-normal
+  height: $dimension-normal
   outline: none
   position: relative
+  transform: rotate(45deg)
+  transform-origin: center center
   vertical-align: top
-  width: 24px
+  width: $dimension-normal
   &:before,
   &:after
     background-color: $white
     content: ""
     display: block
-    height: 2px
     left: 50%
-    margin-left: -25%
-    margin-top: -1px
     position: absolute
     top: 50%
-    width: 50%
+    transform: translateX(-50%) translateY(-50%)
   &:before
-    transform: rotate(45deg)
+    height: 2px
+    width: 50%
   &:after
-    transform: rotate(-45deg)
-  &:hover
-    background-color: rgba($black, 0.2)
+    height: 50%
+    width: 2px
+  &:hover,
+  &:focus
+    background-color: rgba($black, 0.3)
+  &:active
+    background-color: rgba($black, 0.4)
   // Sizes
   &.is-small
-    height: 16px
-    width: 16px
+    height: $dimension-small
+    width: $dimension-small
   &.is-medium
-    height: 32px
-    width: 32px
+    height: $dimension-medium
+    width: $dimension-medium
   &.is-large
-    height: 40px
-    width: 40px
+    height: $dimension-large
+    width: $dimension-large
 
 =fa($size, $dimensions)
   display: inline-block
@@ -133,9 +143,12 @@
   border-top-color: transparent
   content: ""
   display: block
-  height: 16px
+  height: 1rem
   position: relative
-  width: 16px
+  width: 1rem
+
+=overflow-touch
+  -webkit-overflow-scrolling: touch
 
 =overlay($offset: 0)
   bottom: $offset
@@ -150,18 +163,6 @@
     &:#{$placeholder}-placeholder
       @content
 
-=replace($background, $width, $height)
-  background-color: $background
-  background-position: center center
-  background-repeat: no-repeat
-  background-size: $width $height
-  display: block
-  height: $height
-  outline: none
-  overflow: hidden
-  text-indent: -290486px
-  width: $width
-
 =unselectable
   -webkit-touch-callout: none
   -webkit-user-select: none
@@ -172,8 +173,12 @@
 // Responsiveness
 
 $tablet: 769px !default
-$desktop: 980px !default
-$widescreen: 1180px !default
+// 960px container + 40px
+$desktop: 1000px !default
+// 1152px container + 40
+$widescreen: 1192px !default
+// 960 and 1152 have been chosen because
+// they are divisible by both 12 and 16
 
 =from($device)
   @media screen and (min-width: $device)

data/app/assets/stylesheets/sass/utilities/variables.sass

@@ -29,19 +29,18 @@ $red:          hsl(348, 100%, 61%) !default
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
-$size-1: 48px !default
-$size-2: 40px !default
-$size-3: 28px !default
-$size-4: 24px !default
-$size-5: 18px !default
+$size-1: 3.5rem !default
+$size-2: 2.75rem !default
+$size-3: 2rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
 $size-6: 14px !default
+$size-7: 0.75rem !default
 
-$size-7: 11px !default
-
+$weight-light: 300 !default
 $weight-normal: 400 !default
+$weight-semibold: 500 !default
 $weight-bold: 700 !default
-$weight-title-normal: 300 !default
-$weight-title-bold: 500 !default
 
 // Miscellaneous
 $easing: ease-out !default
@@ -69,19 +68,23 @@ $dark: $grey-darker !default
 // 3. Applied variables
 
 // Invert colors
-$primary-invert: findColorInvert($primary) !default
-
-$info-invert: findColorInvert($info) !default
-$success-invert: findColorInvert($success) !default
-$warning-invert: findColorInvert($warning) !default
-$danger-invert: findColorInvert($danger) !default
-
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: $turquoise-invert !default
+$info-invert: $blue-invert !default
+$success-invert: $green-invert !default
+$warning-invert: $yellow-invert !default
+$danger-invert: $red-invert !default
 $light-invert: $dark !default
 $dark-invert: $light !default
 
 // General colors
-$body-background: $white-ter !default
-
 $background: $white-ter !default
 
 $border: $grey-lighter !default
@@ -106,21 +109,22 @@ $link-invert: $primary-invert !default
 $link-visited: $purple !default
 
 $link-hover: $grey-darker !default
-$link-hover-background: $white-ter !default
-$link-hover-border: $grey-darker !default
+$link-hover-border: $grey-light !default
+
+$link-focus: $grey-darker !default
+$link-focus-border: $primary !default
 
 $link-active: $grey-darker !default
-$link-active-border: $grey-darker !default
+$link-active-border: $grey-dark !default
 
 // Typography
 $family-primary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
 $size-small: $size-7 !default
-$size-normal: $size-6 !default
+$size-normal: 1rem !default
 $size-medium: $size-5 !default
-$size-large: $size-3 !default
-$size-huge: $size-1 !default
+$size-large: $size-4 !default
 
 ////////////////////////////////////////////////
 ////////////////////////////////////////////////

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.2.3'
+  gem.version       = '0.3.0'
   gem.date          = Date.today
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]